CSS外边距合并（折叠）问题。
CSS外边距合并
块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大值，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。
下面列出了会发生外边距折叠的三种基本情况：
- 相邻元素之间
- 毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。
- 父元素与其第一个或最后一个子元素之间
- 如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的
margin-top分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。 - 空的块级元素
- 如果一个块级元素中不包含任何内容，并且在其
margin-top与margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠。
一些需要注意的地方：
- 上述情况的组合会产生更复杂的外边距折叠。
- 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
示例
HTML：
- 1 <p>The bottom margin of this paragraph is collapsed …</p>
- 2 <p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
- 3
- 4 <div>This parent element contains two paragraphs!
- 5 <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
- 6 <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
- 7 </div>
- 8
- 9 <p>I am <code>2rem</code> below the element above.</p>
CSS：
- 1 div {
- 2 margin: 2rem 0;
- 3 background: lavender;
- 4 }
- 5
- 6 p {
- 7 margin: .4rem 0 1.2rem 0;
- 8 background: yellow;
- 9 }
结果：
版权声明：本文为lithree原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。