细说CSS中margin属性的使用

本文着重描述关于 marg，我们日常不太容易发现的“坑”。

盒模型

接触过 CSS 的人应该都知道 CSS 的盒模型

由内容边缘（Content edge）包围形成的是内容盒（Content Box），类推还有内边距盒（Paddg Box）、边框盒（Border Box）、外边距盒（Marg Box）。
其中内容盒、内边距盒、边框盒的背景由background属性决定，而外边距盒的背景是透明的。

CSS marg 属性

关于 marg 属性，有几点可能跟我们的直觉不相符

1、如果 marg 的值是百分比，则是相对于父元素的内容盒宽度来计算的，即使 marg- 和 marg-bottom 也是如此。即使父元素的高宽不相等，子元素的 marg 元素指定了相同的百分比值，则子元素各个方向的 marg 计算值都是相等的。
2、marg- 和 marg-bottom 值对行内非替换元素（non-replaced le element）是无效的。我们可以指定 img 元素的 marg- 和 marg-bottom，而非替换行内元素（如 i，span 等）设置 marg- 和 marg-bottom 却不会产生效果。

相邻的 marg（Adjog marg）

如果两个垂直方向上的 marg，它们中间没有其他垂直 marg，但它们之间不一定相接触，我们就说这两个 marg 是垂直毗连（vertical-adjacent）的，包括以下四种情况，满足其中之一即可

• 父元素的 marg 和第一个子元素的 marg
  父元素的bottom marg 和一个子元素的 bottom marg
  元素的 bottom marg 和与这个元素相邻的兄弟元素的 marg
  如果一个元素，它没有生成 BFC、没有包含正常流的子元素、m-height是0、height是0或者 auto，则它的 marg 和 bottom marg 也是垂直毗连的

如果两个 marg 满足以下三个条件，我们就说这两个 marg 是相邻（adjog）的

1、这两个 marg 是垂直毗连的，即满足上面四种情况之一
2、marg 的两个元素都是正常流的块级元素，并且在同一个 BFC 中
3、两个 marg 之间没有行盒（le box）、清除浮动后的空隙（clearance）、paddg和 border

marg 折叠（Collapsg margs）

marg 折叠，即相邻的 marg 有可能会被折叠成一个。

比如元素 #a 指定了 marg-bottom 为 10px，而它下方的元素 #b 指定了 marg- 为 20px，如这样

元素 #a 的 marg-bottom 和元素 #b 的marg- 在位置上重叠了，它们之间的距离是 20px，即元素 #b 的 bottom marg 长度，这就是 marg 折叠现象。关于这个现象，可以这么理解

marg 定义的是它与其他盒子之间的最小间距。其中元素 #a 指定了 marg-bottom 为 10px，就表明它下方的元素 #b 与它至少要有 10px 的距离，它指定的是一个最小值，实际的距离可以比这个大。

元素 #a 下方的元素 #b 也设置了 marg- 为 20px，如果不折叠，则他们之间就有 30px 的距离。如果折叠成了一个 20px 的距离，则对元素 #a 来说，它的 marg-bottom 要求至少要有 10px 的距离，是满足的，而对于元素 #b 来说，它的 marg- 要求至少要有 20px 的距离，也是满足的。

而 marg 折叠的存在，其实是为了可以在视觉上显得更美观，也更贴近设计师的预期。

marg 折叠规则

并不是所有的 marg 都可以折叠，需要满足以下条件

• 垂直相邻的 marg 才有可能折叠，水平 marg 永远不折叠
  根元素（即 html 元素）的 marg 永远不折叠
  如果一个元素，它的 marg 和 bottom marg 是相邻的，并且有清除浮动后的空隙（clearance），这个元素的 marg 可以跟兄弟元素的 marg 折叠，折叠后的 marg 不能跟父元素的 bottom marg 折叠。

需要注意的是，marg 并不是只能折叠一次，多个满足要求的 marg 都可以进行折叠形成一个折叠后的 marg（collapsed marg）。
并且假如这个折叠后的 marg 是由 marg A 等折叠而来的，如果有 marg X 跟 marg A 是相邻的，则我们也认为 marg X 跟这个折叠后的 marg 相邻。

折叠后的 marg 大小

当两个或者两个以上的 marg 折叠后，marg 的值计算如下

• 如果 marg 都是正数，则取他们当中的最大值
  如果 marg 中有正有负，则取最大的正数加上最小的负数（如最大的 marg 是 20px，最小的 marg 是 -20px，则他们计算后的值是 0）
  如果 marg 中都是负数，则取他们当中的最小值

几道思考题

浮动、定位元素的 marg 不会和其他任何元素的 marg 发生重叠，包括它的子元素。

这是因为浮动元素脱离了正常流，所以它和其他相邻元素就不处与同一个流中，自然不相邻；又因为浮动元素的内容盒会形成一个新的 BFC，所以浮动元素跟子元素不处与同一个 BFC 中，它们的 marg 也不能折叠。定位元素同理可得。

le-block 的元素不会和其他元素的 marg 发生折叠，包括它的子元素。

因为 marg 折叠只会发生在块级元素上， le-block 元素的 marg 不会和兄弟元素折叠，又因为 le-block 的内容盒会形成一个新的 BFC，所以 le-block 元素本身也不会和子元素的 marg 发生折叠

marg 折叠的几个栗子

栗子1

如果两个 marg 满足以下三个条件，我们就说这两个 marg 是相邻（adjog）的

两个 marg 之间没有行盒（le box）、清除浮动后的空隙（clearance）、paddg和边框

针对这个条件，我们通过增加 paddg 的方式来阻止 marg 的折叠

如果 #contaer 没有下边框，则 #contaer 的 bottom marg 和 #ner 的 bottom marg 是相邻的，它们折叠了，并且 #ner 撑开了 #contaer 元素，所以可以看到 #contaer 元素的高度变成了 10px，且显示的是 #ner 的红色背景

当给 #contaer 添加一个下边框，两个 marg 之间就边框的阻隔，他们就不相邻了，不能折叠。所以可以看到 #contaer 被撑开成了 20px，其中 10px 是 #ner 的高度，还有 10px 是 #ner 的 bottom marg，并且由于 marg 是透明的， #contaer 露出了部分蓝色的背景。

栗子2

如果两个 marg 满足以下三个条件，我们就说这两个 marg 是相邻（adjog）的

marg 的两个元素都是正常流的块级元素，并且在同一个 BFC 中

我们通过创建新的 BFC来阻止 marg 的折叠

如上图 #contaer 元素和 #ner 元素同属于一个 BFC 中，#contaer 的 marg 和 #ner 的 marg 折叠，bottom marg 同理。
但如果让 #contaer 跟 #nter 处在不同的 BFC 中，则 marg 和 bottom marg 都不会折叠，如

给 #contaer 元素增加一个 overflow: hidden 属性，让它的内容盒生成一个独立的 BFC，而 #ner 处于这个独立的 BFC 中， #contaer 和 #ner 就处于两个不同的 BFC 中了，所以他们的 marg 不能折叠。

栗子3

如果一个元素，它本身的 marg 和 bottom marg 是相邻的，并且有清除浮动后的空隙（clearance），这个元素的 marg 可以跟兄弟元素的 marg 折叠，折叠后的 marg 不能跟父元素的 bottom marg 折叠。

给父元素 #contaer 设置了一个灰色背景，并且没有设置高度，高度会随着内容而扩展，marg 设置为 50px。
其中有一个红色的浮动元素 #floated，高宽都设置为 40px。
给 #cleared 设置了 15px 的 marg，并且元素的高度、paddg、marg 都为0， #cleared 元素的 marg 和 bottom marg 是相邻的。这个元素的位置如下图所示

因为 #cleared 元素清除了左浮动，所以 #cleared 元素下移。
而 #cleared 元素和 #sliblg 元素的 marg 折叠了，可以看到他们的位置是重叠的。

由于这条规则的存在，导致他们折叠后的 marg 不能跟 #contaer 的 bottom marg 进行折叠， #contaer 的高度被撑开。

如果没有这条规则，他们还应该跟 #contaer 的 bottom marg 进行折叠，如

以上这张图，在去掉了 #cleared 元素的 clear 属性之后，就不满足这条规则了，所以可以看到 #contaer 的高度就只有 40px，即红色的浮动元素的高度，而 #cleared 元素、#siblg 元素、#contaer 元素的 marg 都折叠成了一个。

以上就是关于CSS中marg属性的使用方法介绍，希望对大家学习理解CSS中marg属性有所帮助。