CSS盒模型_html/css

p {margin: 1px;} /* 等价于 1px 1px 1px 1px */

2 个值，第 3 个值（下外边距）由第 1 个值（上外边距）复制得到，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到

h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */

3 个值，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到

h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */

归纳起来就是，上下对应，左右对应，第一个值是 top.

值合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距也会发生合并。请看下图：

外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

外边距合并既能够节省页面空间又能使页面更加美观。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS 边框有着丰富的内容，为了避免此页面过长，特将其独立出来介绍，稍后会贴出链接。

元素的内边距是在边框和内容区之间。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

内边距的使用与外边距的使用类似。

给 h1 元素的各边添加 10 像素的内边距

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值

h1 {padding: 10px 0.25em 2ex 20%;}

同样可以分别设置四个方位

h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%;}

内边距与外边距一样，遵循值复制的规则。