2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10…
8 盒模型 Box Model
URL: http://www.w3.org/TR/CSS2/box…
Translator : HaoyCn
Date: 15th of Aug, 2015
译者注:本译文仅择精要部分翻译了规范,主要描述了盒模型结构,以及重点分析外边距折叠。个人水平有限,欢迎指正!
CSS盒模型所描述的矩形盒由文档树内的元素生成,根据视觉格式化模型布局。
8.1 盒尺寸 Box Dimensions
每个盒都有一个内容区域 Content
(如,文本,图片等)以及可选的围绕在周围的内边距、边框和外边距区域;每个区域的大小由本文后述的属性指定。下图展示了这些区域的关联以及用于描述外边距、边框和内边距的各部分的术语。
该文档结果为文档树中(省略其他关系)一个 下面的第一图展示了例子的结果。第二图展示了 http://segmentfault.com/a/119…。 如果读者已经掌握清除浮动和空隙的知识,那就让我们来看一个有空隙的情景。 如果一个有空隙的元素的上下外边距相邻,其外边距将同其后同胞的相邻外边距折叠,但不同父块的下外边距折叠。 以下代码中, 共同CSS: 其外边距将同其后同胞的相邻外边距折叠: HTML: 渲染结果是, 不同父块的下外边距折叠 HTML: 渲染结果是, 如果一个盒不建立新的块格式化上下文、 由此可以得出几种避免盒自身上下外边距折叠的办法,简单列举如下: 建立新块格式化上下文,如 设置 设置固定高 添加文档流内(即非浮动、非绝对定位)子盒 需要注意最后一种办法,子盒要么有边框或内边距,要么有内容,否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距,该垂直外边距将同父盒的垂直外边距折叠,而不会阻止父盒自身垂直边距折叠。 ul
元素及其两个 li
子元素。 ul
元素及其 li
子元素的外边距、内边距和边框之间的关系。(图片不成比例) B
是浮动块,为清除其浮动, C
引入了空隙。html,body{padding:0;margin:0;}
/*横线,直观对比折叠情况*/
.line{height:50px;background:red;}
.mt{margin-top:50px;}
.mb{margin-bottom:50px;}
#B{float:left;width:1px;height:1px;}
#C{clear:both;}
<body>
<div id="A">
<div id="B"></div>
<div id="C" class="mb"></div>
<div id="D" class="mb"></div>
<div class="line"></div>
</div>
</body>
C
和 D
的外边距折叠。 <body>
<div id="A" class="mb">
<div id="B"></div>
<div id="C" class="mb"></div>
</div>
<div class="line"></div>
</body>
C
的外边距不同其父元素 A
的外边距折叠。四、避免盒自身垂直外边距折叠
min-height
计算值为零、 height
计算值为零或 auto
、没有在文档流内的子盒,其上下外边距 overflow: hidden
min-height
height