CSS margin-bottom 属性-之路教程

margin 折叠

在某些情况下，顶部和底部边距可以折叠成一个等于这两个边距中最大的一个。
这只会发生在垂直（顶部和底部）边距上。

p.one {
  margin: 20px 0;
}
p.two {
  margin: 35px 0;
}

在上面的代码示例中，<p class="one"> 元素的垂直边距为 20px。
<p class="two"> 的垂直边距为 35px。
你会认为这两个元素之间的垂直边距必须是 55px。
但是，由于边距折叠，实际边距将为 35px。

边距折叠示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p.one {
        margin: 20px 0;
      }
      p.two {
        margin: 35px 0;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom 属性示例</h2>
    <p>是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
    <p class="one">是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
    <p class="two">是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
    <p>是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
  </body>
</html>

CSS margin-bottom 属性

margin-bottom 属性用于设置元素底部的边距空间。

负值有效。

如果使用了不可替换的内联元素（例如 <tt> 或者 <span>），CSS margin-bottom 属性将没有任何效果。

初始值	0
应用于	所有元素。它还适用于::first-letter伪元素。
继承	无效
可动画的	是的。元素的底部边际是可动的。
版本	CSS2.
DOM 语法	object.style.marginbottom =“70px”;

语法

margin-bottom: length | auto | initial | inherit;

margin-bottom 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .bottom {
        margin-bottom: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom 属性示例</h2>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
    <p class="bottom">把痛苦停在昨天 把微笑留给明天。</p>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
  </body>
</html>

定义为“4em”的 margin-bottom 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .bottom {
        margin-bottom: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom 属性示例</h2>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
    <p class="bottom">把痛苦停在昨天 把微笑留给明天。</p>
    <p>把痛苦停在昨天 把微笑留给明天。</p>
  </body>
</html>

“px”、“em”和“%”中指定的 margin-bottom 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p.p1 {
        margin-bottom: 5em;
      }
      p.p2 {
        margin-bottom: 20%;
      }
      p.p3 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom 属性示例</h2>
    <p>没有指定边距的段落。</p>
     <p class="p1">下边距设置为 5em。</p>
     <p class="p2">下边距设置为 20%。</p>
     <p class="p3">下边距设置为 20 像素。</p>
     <p>没有指定边距的段落。</p>
  </body>
</html>

CSS margin-bottom 属性值说明

值	描述
auto	设置底部边距。这是此属性的默认值。
length	定义PX，PT，CM等中的底部边距。默认值为0。
%	将底部边值设置为包含元素的％。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:38 来源：oir作者：oir

←如何使div等于100%的窗口高度

CSS margin-left 属性→