盒模型

就是就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。

每个元素盒子的属性可以分成三组

1、边框（border），可以设置边框的宽窄、样式和颜色。
2、内边距（padding），可以设置盒子内容区与边框的间距。
3、外边距（margin），可以设置盒子与相邻元素盒子的间距。

一个盒子有 4条边

因此与边框、 内边距和外边距相关的属性也各有 4 个，分别是上（top）、右（right）、下（bottom）、 左（left）。

CSS 为边框、内边距和外边距分别规定了简写属性

让你通过一条声明就可以完成设定。在每个简写声明中，属性值的顺序都是上、右、下、左，想象一下顺时针旋转。
使用简写属性，则可以简写为这样：
{ margin:5px 10px 12px 8px; }

推荐大家把下面这条规则作为样式表的第一条规则：

* { 
    margin:0; 
    padding:0;
}

这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后，所有默认的外边距和内边距都会消失。然后，你可以为那些真正需要外边距的元素再添加外边距。

叠加外边距

垂直方向上的外边距会叠加，假设有 3 个段落，前后相接，而且都应用以 下规则：

p {
    height:50px;
    border:1px solid #000;
    backgroundcolor:#fff;
    margin-top:50px;
    margin-bottom:30px;
}

由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距是 80 像素（50+30），但是你错啦！它们实际的间距是 50 像素。像这样上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。就上面的例 子而言，第二段较宽的上外边距会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远，没错——50 像素。这个过程就叫外边距叠加。

注意

叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和。