在此页

• 另请参阅
• 规范
• 另请参阅
• 相关话题

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model . CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas ), defined by their respective edges: the content edge , padding edge , border edge ，和 margin edge .

content area , bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (或 content-box width ) and the content height (或 content-box height ). It often has a background color or background image.

若 box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width , min-width , max-width , height , min-height ，和 max-height 特性。

padding area , bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width 和 padding-box height .

The thickness of the padding is determined by the padding-top , padding-right , padding-bottom , padding-left , and shorthand padding 特性。

border area , bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width 和 border-box height .

The thickness of the borders are determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box , the border area's size can be explicitly defined with the width , min-width , max-width , height , min-height ，和 max-height properties. When there is a background ( background-color or background-image ) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the background-clip css property.

margin area , bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width 和 margin-box height .

The size of the margin area is determined by the margin-top , margin-right , margin-bottom , margin-left , and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the borders and padding are still displayed around the content.

另请参阅

• Layout and the containing block
• Introducing the CSS Cascade
• Cascade and inheritance

规范

规范	状态	注释
CSS 基本 Box 模型	工作草案
CSS Level 2 (Revision 1)	推荐	Though more precisely worded, there is no practical change.
CSS Level 1	推荐	初始定义。

另请参阅

• CSS 关键概念： CSS 句法 , at-rule , comments , specificity and 继承 , the box , layout modes and visual formatting models , and margin collapsing , 或 initial , computed , resolved , specified , used , and actual values. Definitions of value syntax , shorthand properties and replaced elements .

元数据

• 最后修改： Sep 25, 2019

相关话题

1. CSS
2. CSS 参考
3. CSS Box Model
4. 指南

   1. CSS 基本 Box 模型介绍
   2. Mastering margin collapsing
5. 特性

   1. height
   2. margin-bottom
   3. margin-left
   4. margin-right
   5. margin-top
   6. margin-trim
   7. max-height
   8. max-width
   9. min-height
   10. min-width
   11. overscroll-behavior
   12. overscroll-behavior-block
   13. overscroll-behavior-inline
   14. overscroll-behavior-x
   15. overscroll-behavior-y
   16. padding
   17. padding-bottom
   18. padding-left
   19. padding-right
   20. padding-top
   21. visibility
   22. width