细说CSS中margin特性的应用

本文侧重叙述有关 margin，大家平常不太非常容易发现的“坑”。

盒实体模型

触碰过 CSS 的人应当都了解 CSS 的盒实体模型：

由內容边沿（Content edge）包围着产生的是內容盒（Content Box），类推也有内边距盒（Padding Box）、边框盒（Border Box）、外边距盒（Margin Box）。
在其中內容盒、内边距盒、边框盒的情况由background特性决策，而外边距盒的情况是全透明的。

CSS margin 特性

有关 margin 特性，有几点将会跟大家的判断力不符合：

1、假如 margin 的值是百分比，则是相对父元素的內容盒宽度来测算的，即便 margin-top 和 margin-bottom 也是这般。因而即便父元素的高宽不相同，子元素的 margin 元素特定了同样的百分比值，则子元素各个方位的 margin 测算值全是相同的。
2、margin-top 和 margin-bottom 值对行内非更换元素（non-replaced inline element）是失效的。因而大家能够特定 img 元素的 margin-top 和 margin-bottom，而非更换行内元素（如 i，span 等）设定 margin-top 和 margin-bottom 却不容易造成实际效果。

邻近的 margin（Adjoining margin）

假如两个竖直方位上的 margin，它们正中间沒有别的竖直 margin，但它们之间不1定相触碰，大家就说这两个 margin 是竖直毗邻（vertical-adjacent）的，包含下列4种状况，考虑在其中之1便可：

• 父元素的 top margin 和第1个子元素的 top margin
  父元素的bottom margin 和最终1个子元素的 bottom margin
  元素的 bottom margin 和与这个元素邻近的弟兄元素的 top margin
  假如1个元素，它沒有转化成 BFC、沒有包括一切正常流的子元素、min-height是0、height是0或 auto，则它的 top margin 和 bottom margin 也是竖直毗邻的

假如两个 margin 考虑下列3个标准，大家就说这两个 margin 是邻近（adjoining）的：

1、这两个 margin 是竖直毗邻的，即考虑上面4种状况之1
2、margin 的两个元素全是一切正常流的块级元素，而且在同1个 BFC 中
3、两个 margin 之间沒有行盒（line box）、消除波动后的间隙（clearance）、padding和 border

margin 折叠（Collapsing margins）

margin 折叠，即邻近的 margin 有将会会被折叠成1个。

例如元素 #a 特定了 margin-bottom 为 10px，而它正下方的元素 #b 特定了 margin-top 为 20px，如这样：

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在部位上重合了，它们之间的间距是 20px，即元素 #b 的 bottom margin 长度，这便是 margin 折叠状况。有关这个状况，能够这么了解：

margin 界定的是它与别的盒子之间的最少间隔。在其中元素 #a 特定了 margin-bottom 为 10px，就说明它正下方的元素 #b 与它最少要有 10px 的间距，它特定的是1个最少值，因而具体的间距能够比这个大。

元素 #a 正下方的元素 #b 也设定了 margin-top 为 20px，假如不折叠，则她们之间就有 30px 的间距。假如折叠变成1个 20px 的间距，则对元素 #a 来讲，它的 margin-bottom 规定最少要有 10px 的间距，是考虑的，而针对元素 #b 来讲，它的 margin-top 规定最少要有 20px 的间距，也是考虑的。

而 margin 折叠的存在，实际上是以便能够在视觉效果上显得更美观大方，也更接近设计方案师的预期。

margin 折叠标准

其实不是全部的 margin 都可以以折叠，必须考虑下列标准：

• 竖直邻近的 margin 才有将会折叠，水平 margin 始终不折叠
  根元素（即 html 元素）的 margin 始终不折叠
  假如1个元素，它的 top margin 和 bottom margin 是邻近的，而且有消除波动后的间隙（clearance），这个元素的 margin 能够跟弟兄元素的 margin 折叠，可是折叠后的 margin 不可以跟父元素的 bottom margin 折叠。

必须留意的是，margin 其实不是只能折叠1次，好几个考虑规定的 margin 都可以以开展折叠产生1个折叠后的 margin（collapsed margin）。
而且倘若这个折叠后的 margin 是由 margin A 等折叠而来的，假如有 margin X 跟 margin A 是邻近的，则大家也觉得 margin X 跟这个折叠后的 margin 邻近。

折叠后的 margin 尺寸

当两个或两个以上的 margin 折叠后，margin 的值测算以下：

• 假如 margin 全是正数，则取她们之中的最大值
  假如 margin 中有正有负，则取最大的正数再加最少的负数（如最大的 margin 是 20px，最少的 margin 是 ⑵0px，则她们测算后的值是 0）
  假如 margin 中全是负数，则取她们之中的最少值

几道思索题

波动、精准定位元素的 margin 不容易和别的任何元素的 margin 产生重合，包含它的子元素。

这是由于波动元素摆脱了一切正常流，因此它和别的邻近元素就不处与同1个流中，当然不邻近；又由于波动元素的內容盒会产生1个新的 BFC，因此波动元素跟子元素不处与同1个 BFC 中，因而它们的 margin 也不可以折叠。精准定位元素同理可得。

inline-block 的元素不容易和别的元素的 margin 产生折叠，包含它的子元素。

由于 margin 折叠只会产生在块级元素上，因而 inline-block 元素的 margin 不容易和弟兄元素折叠，又由于 inline-block 的內容盒会产生1个新的 BFC，因此 inline-block 元素自身也不容易和子元素的 margin 产生折叠

margin 折叠的几个栗子

栗子1

假如两个 margin 考虑下列3个标准，大家就说这两个 margin 是邻近（adjoining）的：

两个 margin 之间沒有行盒（line box）、消除波动后的间隙（clearance）、padding和边框

对于这个标准，大家根据提升 padding 的方法来阻拦 margin 的折叠：

假如 #container 沒有下边框，则 #container 的 bottom margin 和 #inner 的 bottom margin 是邻近的，因而它们折叠了，而且 #inner 撑开了 #container 元素，因此能够看到 #container 元素的高宽比变为了 10px，且显示信息的是 #inner 的鲜红色情况

当给 #container 加上1个下边框，两个 margin 之间就边框的隔绝，她们就不邻近了，因而不可以折叠。因此能够看到 #container 被撑开变成 20px，在其中 10px 是 #inner 的高宽比，也有 10px 是 #inner 的 bottom margin，而且因为 margin 是全透明的，因而 #container 露出了一部分蓝色的情况。

栗子2：

假如两个 margin 考虑下列3个标准，大家就说这两个 margin 是邻近（adjoining）的：

margin 的两个元素全是一切正常流的块级元素，而且在同1个 BFC 中

大家根据建立新的 BFC来阻拦 margin 的折叠：

如上图 #container 元素和 #inner 元素同属于1个 BFC 中，#container 的 top margin 和 #inner 的 top margin 折叠，bottom margin 同理。
但假如让 #container 跟 #innter 处在不一样的 BFC 中，则 top margin 和 bottom margin 都不容易折叠，如：

给 #container 元素提升1个 overflow: hidden 特性，让它的內容盒转化成1个单独的 BFC，而 #inner 处在这个单独的 BFC 中，因而 #container 和 #inner 就处在两个不一样的 BFC 中了，因此她们的 margin 不可以折叠。

栗子3：

假如1个元素，它自身的 top margin 和 bottom margin 是邻近的，而且有消除波动后的间隙（clearance），这个元素的 margin 能够跟弟兄元素的 margin 折叠，可是折叠后的 margin 不可以跟父元素的 bottom margin 折叠。

给父元素 #container 设定了1个灰色情况，而且沒有设定高宽比，因而高宽比会伴随着內容而拓展，margin 设定为 50px。
在其中有1个鲜红色的波动元素 #floated，高宽都设定为 40px。
给 #cleared 设定了 15px 的 margin，而且元素的高宽比、padding、margin 都为0，因而 #cleared 元素的 top margin 和 bottom margin 是邻近的。这个元素的部位以下图所示：

由于 #cleared 元素消除了左波动，因此 #cleared 元素下移。
而 #cleared 元素和 #slibling 元素的 margin 折叠了，因而能够看到她们的部位是重合的。

因为这条标准的存在，致使她们折叠后的 margin 不可以跟 #container 的 bottom margin 开展折叠，因而 #container 的高宽比被撑开。

假如沒有这条标准，她们还应当跟 #container 的 bottom margin 开展折叠，如：

以上这张图，在去掉了 #cleared 元素的 clear 特性以后，就不考虑这条标准了，因此能够看到 #container 的高宽比就仅有 40px，即鲜红色的波动元素的高宽比，而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折叠变成1个。

以上便是有关CSS中margin特性的应用方式详细介绍，期待对大伙儿学习培训了解CSS中margin特性有一定的协助。