CSS外边距合并

最新推荐文章于 2022-01-30 15:58:42 发布

tutucute0000

最新推荐文章于 2022-01-30 15:58:42 发布

阅读量1.9k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/tutucute0000/article/details/24943841

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简单的来说，外边距合并指的是，当两个垂直外边距相遇时，它们会合并成一个，合并后的外边距的大小等于发生合并的两个外边距中的较大者。

下面借鉴了w3schol中的部分例子加以修改，列出几种外边距合并的i情况：

1. 一个块元素的下外边距和它下面的块元素的上外边距合并，如果它们都在文档流中且它们之间没有clearence。

<html>
  <head>
    <style type="text/css">
    * { margin:0; padding:0; border:0;}
    #d1 { width:50px; height:50px; margin-top:20px; margin-bottom:20px; background-color:red;}
    #d2 { width:50px; height:50px; margin-top:10px; background-color:blue;}
    </style>
  </head>
  <body>
    <div id="d1"></div>
    <div id="d2"></div>
  </body>
</html>

两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）

2. 当一个元素包含在另一个元素中时（同时没有内边距或边框把它们的外边距分隔开），它们的上/下外边距也会发生合并。

<html>
  <head>
    <style type="text/css">
    * { margin:0; padding:0; border:0;}
    #outer { width:100px; background-color:red; margin:20px;}
    #inner { width:50px; height:50px; background-color:blue; margin:10px;}
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
    <p>如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。如果height值是auto，min-height为0, 那么内部 div 的下外边距还将与外部 div 的下外边距合并。</p>
  </body>
</html>

3. 假设有一个空元素（或是其子元素全部都不在文档常规流中），它有外边距却没有边框或填充，height为0或auto，min-height为0。在这种情况下，它自身上外边距与下外边距就碰到了一起，发生合并。

<html>
  <head>
    <style type="text/css">
    * { margin:0; padding:0; border:0;}
    #d1 { margin:20px; background-color:red;}
    #d2 { width:50px; height:50px; background-color:blue;}
    </style>
  </head>
  <body>
    <div id="d1"></div>
    <div id="d2"></div>
  </body>
</html>

div d2与上边的距离就是div d1的上下外边距合并后的20px。

当然并不是所有情况下，相邻的块的上下外边距都会合并。下面列出几种不合并的情况：

1. float不为none的元素与其他元素的外边距不会合并，也不会与自己的子元素的外边距合并。

<html>
  <head>
    <style type="text/css">
    * { margin:0; padding:0; border:0;}
    #d1 { width:50px; height:50px; margin:10px; background-color:green;}
    #outer { width:100px; height:150px; background-color:red; margin:20px; float:left;}
    #inner1 { width:50px; height:50px; background-color:blue; margin:10px;}
    </style>
  </head>
  <body>
    <div id="d1"></div>
    <div id="outer">
      <div id="inner1"></div>
      <div id="inner1"></div>
    </div>
  </body>
</html>

红框与绿框的距离为30px而不是20px，因为红框是浮动元素，红框的子元素蓝框的上外边距也没有和红框的上外边距合并，但还是与它的兄弟元素的外边距合并了。

2. 如果一个元素的overflow属性不是visible，那它也不会和自己的子元素合并外边距。

例如将本文第二个例子修改为

#outer { width:100px; background-color:red; margin:20px; overflow:hidden;}

子元素的上下外边距都没有与父元素合并。

3. 绝对定位的元素与其他元素的外边距不会合并，也不会与自己的子元素的外边距合并。

例如将本文第四个例子修改为

#outer { width:100px; height:150px; background-color:red; margin:20px; position:absolute; left: 30px; top: 20px;}

结果与例四类似，绝对定位元素的外边距没有任何的合并。

4. inline-block元素的外边距也不会合并。

<html>
  <head>
    <style type="text/css">
    * {margin:0;padding:0;border:0;}
    ul {width:50px;}
    li {display:inline-block;margin-top:10px;margin-bottom:10px;}
   </style>
  </head>
  <body>
    <ul class="disc">
      <li>咖啡</li>
      <li>茶</li>
      <li>可口可乐</li>
    </ul>
  </body>
</html>