深入解析CSS第三章外边距折叠——读书笔记

3.4 外边距折叠

• 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。这种现象被称作折叠
  

3.4.1 文字折叠

• 段落（<p>）默认有1em的上外边距和1em的下外边距。由于会折叠，只产生1em的间隔
• 标题的下方有19.92px的外边距（24px字号× 0.83em外边距），段落顶部有16px的外边距（16px字号×1em外边距）。它们中的较大者是19.92px，也就是最终渲染的两个元素之间的间距。
  

3.4.2 多个外边距折叠

• 包裹在div里的段落也会产生外边距折叠
  
  <h2>底部的外边距、<div>顶部的外边距、<p>顶部的外边距。计算值分别是19.92px、0px、16px。因此最终间隔还是19.92px，也就是三者中最大的值
• 所有相邻的顶部和底部外边距会折叠到一起
• 只有上下外边距会产生折叠，左右外边距不会折叠

容器外部折叠

• 网页标题是<h1>，用户代理样式表给它底部设置的外边距为0.67em（21.44px）。它的父元素是<header>，没有设置任何外边距。因为它们的底部外边距相邻，所以会折叠，导致<header>下方出现了21.44px的外边距。这两个元素顶部的外边距也发生了折叠。
  这种现象比较奇怪。在这种情况下，我们希望<h1>的外边距留在<header>中，但是外边距不一定在理想的地方折叠。幸运的是，有一些方法可以防止这种现象。实际上你已经在网页的主区域修复过这个问题了。注意看“Come join us! ”上方的外边距没有在容器外面折叠，这是因为弹性子元素的外边距不会折叠，而这一块刚好用了Flexbox布局。
• 内边距也能解决这个问题。给头部添加上下内边距，外边距就不会在容器外部折叠。
  

---

以下方法可以防止外边距折叠

❑ 对容器使用overflow: auto（或者非visible的值），防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。
❑ 在两个外边距之间加上边框或者内边距，防止它们折叠。
❑ 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠。
❑ 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局（参见第6章）同理。
❑ 当元素显示为table-cell时不具备外边距属性，因此它们不会折叠。此外还有table-row和大部分其他表格显示类型，但不包括table、table-inline、table-caption。