Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Summary

文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

在CSS中,这些矩形盒子用 标准盒模型 来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge内容边界content edge。 

内容区域content area 是真正包含元素内容的区域。位于内容边界的内部,它的大小为内容宽度 或 content-box宽及内容高度或content-box高。

如果 box-sizing 为默认值, width, min-width, max-width, height, min-heightmax-height 控制内容大小。

内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部,通常有背景——颜色或图片(不透明图片盖住背景颜色). 它的大小为 padding-box  宽与 padding-box 高。

内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。

边框区域border area 是包含边框的区域,扩展了内边距区域。它位于边框边界内部,大小为 border-box  宽和 border-box 高。由 border-width 及简写属性 border控制。

外边距区域margin area用空白区域扩展边框区域,以分开相邻的元素。它的大小为  margin-box 的高宽。

外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。

外边距合并 的情况下,由于盒之间共享外边距,外边距不容易弄清楚。

最后,请注意,对于非替换的行内元素来说,尽管内容周围存在内边距与边框,但其占用空间(行高)由 line-height 属性决定。

规范

规范 状态 说明
CSS Level 2 (revision 1) Recommendation Though more precisely worded, there is no practical change
CSS Level 1 Recommendation  

相关链接

文档标签和贡献者

标签: 
 此页面的贡献者: kevinfszu, fscholz, stephaniehobson, Ende93, teoli, yan
 最后编辑者: kevinfszu,