CSS 之 margin

今天跟大家分享下CSS 之 margin的知识。

前言

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。

CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。

margin看起来是一个相当简单的事情，但是，在本文中，咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是，margin之间如何相互作用，以及 margin 重叠效果。

1 CSS 盒模型

CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的。

盒子的的四个margin属性和maring缩写都在CSS1中定义。

CSS2.1规范有一个演示盒模型的插图，还定义了用来描述各种盒子的术语，其中包括 content box、填padding box、border box和 margin box。

现在有一个 Level 3 Box Model specification 的草案。这个规范引用了CSS2作为盒模型和margin的定义，因此我们将在本文的大部分内容中使用CSS2定义。

2 CSS 重叠

CSS1 规范定义了margin，也定义了垂直 margin 重叠。如果考虑到在早期，CSS被用作文档格式语言，那么 margin 重叠是有意义的。 margin 重叠意味着，当一个有底部margin的标题后面跟着一个有顶部 margin 的段落时，它们之间就不会出现较大的空白。

当两个 margin 发生重叠时，它们将组合在一起，两个元素之间的空间取较大的一个。 较小的 margin 在较大的里面。
在以下情况下，margin 会重叠：
相邻的兄弟姐妹
完全空盒子
父元素和第一个或最后一个子元素
依次来看看这些场景。

3 相邻的兄弟姐妹

对 margin 重叠的最初描述是演示相邻兄弟姐妹之间的 margin 是如何重叠的。除了下面提到的情况之外，如果有两个元素在正常流中依次显示，那么第一个元素的底部 margin 将与下面元素的顶部 margin 一起重叠。

在下面示例中，有三个div元素。第一个 div 的顶部和底部的margin都是50px。第二个 div 的顶部和底部 margin 都是20px。
第三个 div 的顶部和底部 margin 都是3em。前两个元素之间的 margin 是50px，因为较小的顶部 margin 与较大的底部 margin 相结合。

第二个元素与第三个元素之间的 margin 是 3em，因为3em大于第二个元素底部margin 20px。
html

<div class="wrapper">
<div class="box example1">
  margin-top: 50px; margin-bottom: 50px;
</div>
<div class="box example2">
  margin-top: 20px; margin-bottom: 20px;
</div>
<div class="box example3">
  margin-top: 3em; margin-bottom: 3em;
</div>
</div>

css

.wrapper {
   
  border: 5px dotted black;
}
.example1 {
   
  margin: 50px 0 50px 0;
}
.example2 {
   
  margin: 20px 0 20px 0;
}
.example3 {
   
  margin: 3em 0 3em 0;
}
body {
   
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}
.box {
   
  background-color: rgb(55,55,110);
  color: white;
  padding: 20px;
  border-radius: