一、基本概念
CSS 盒子，规定了元素框处理元素（内容、内边距、边框和外边距）的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距，外边距是透明的，不会遮挡元素。
内边距、边框和外边距都是可选的，默认值是零。元素可以由浏览器内置样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
{
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
二、浏览器兼容性
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。但是IE 5 和 6 使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
因此，杭州达内web培训专家建议，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
三、外边距 margin
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
1、可选值
设置外边距的最简单的方法就是使用 margin 属性，该属性接受任何长度单位。
在 h1 元素的各个边上设置了 1/4 英寸宽的空白
h1 {margin : 0.25in;}
为 h1 元素的四个边分别定义不同的外边距
h1 {margin : 10px 0px 15px 5px;}
这些值的顺序是从上外边距 (margin-top) 开始围着元素顺时针旋转的：
margin: top right bottom left
等价于
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 15px;
}
为 margin 设置一个百分比数值
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。
2、值复制
值复制是指 margin 的四个方位属性值部分缺省时的自动填充。
四个值部分缺省，有如下三种情况：
1 个值，其他 3 个值都由这个值（上外边距）复制得到
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.
3、值合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时，它们的上和下外边距也会发生合并。
外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
外边距合并既能够节省页面空间又能使页面更加美观。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
四、边框 border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
五、内边距 padding
元素的内边距是在边框和内容区之间。
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%;
}
内边距与外边距一样，遵循值复制的规则。
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
