【W3学习】CSS Box Model Module Level 3（CSS 盒子模型模块）

这个规范描述了 margin 和 padding 属性，它们在 CSS 框内和周围创建间距。

 

 

 

content-box
Refers to the content box or content edge. (In an SVG context, treated as fill-box.)

padding-box
Refers to the padding box or padding edge. (In an SVG context, treated as fill-box.)

border-box
Refers to the border box or border edge. (In an SVG context, treated as stroke-box.)

margin-box
Refers to the margin box or margin edge. (In an SVG context, treated as stroke-box.)

fill-box
Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)

stroke-box
Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)

view-box
Refers to the nearest SVG viewport element’s origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the viewBox attribute for that element, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)

Note: When the viewBox includes non-zero min-x or min-y offsets, this origin box does not actually correspond to the visible region rectangle defined by the viewBox!

<visual-box> = content-box | padding-box | border-box
<layout-box> = content-box | padding-box | border-box | margin-box
<paint-box> = content-box | padding-box | border-box | fill-box | stroke-box
<coord-box> = content-box | padding-box | border-box | fill-box | stroke-box | view-box

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em; /* copied from opposite side (right) */
}

body { padding: 2em }         /* all padding set to 2em */
body { padding: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { padding: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:

body {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 2em; /* copied from opposite side (right) */
}