CSS 盒状模型简介

框的构成以及相关 CSS 特性( property )

结构

为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型¹为每个元素生成四个嵌套的矩形框， 分别称作 content box、padding box、border box 和 margin box，它们是不可分割的，并可能会重合， 这就是 CSS 规范中描述的“框模型”（box model）。它是以 CSS 的角度去看一个元素被渲染后的抽象形态。 是一个元素自身的构成部分，不同于布局：多个元素在页面上的定位。

 
注：padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示（"LM" 代表 left margin，"RP" 代表 right padding，"TB" 代表 top border……）。

上面的大框，代表一个元素生成的矩形区域( box )，每一个 box 都包括一个 content 区域（元素的内容，如文本，图形等）以及环绕其四周的 padding (元素的内边距，填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。

注：

1. 元素在页面上定位及布局的规则，包括 'position' 和 'float' 等等，详见： W3C CSS2.1 -- 9 Visual formatting model

边界

上述四个区域（content、 padding、border 和 margin）分别有他们自己的边界，细化来说，每个区域都有 top、right、bottom、left 四个边界。

• Content 边界/内边界：Content 边界环绕在由该元素的宽和高决定的一个矩形上，这个尺寸通常由该元素渲染后的内容决定。 这四个 content 边界组成的矩形框就是该元素的 content box。
• Padding 边界：Padding 边界环绕在该元素的 padding 区域的四周，顾名思义，填充背景色，在此范围内有效。如果 padding 的宽度为0， 则 padding 边界与 content 边界重合。这四个 padding 边界组成的矩形框就是该元素的 Padding box。
• Border 边界：Border 边界环绕在该元素的 border 区域的四周，如果 border 的宽度为0，则 border 边界与 padding 边界重合。 这四个 border 边界组成的矩形框就是该元素的 border box。
• Margin 边界/外边界：Margin 边界环绕在该元素的 margin 区域的四周，如果 margin 的宽度为0，则 margin 边界与 border 边界重合。 这四个 margin 边界组成的矩形框就是该元素的 margin box。