CSS中的盒子相关属性，盒子到底有多大

1.内边距

内边距是盒子内容与边框之间的距离，如果你不设定padding，那么元素的文本就会紧挨着元素的边框。

---

2.外边距

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

*{margin:0; padding:0;}

这条规则把所有元素的默认外边距和内边距都设为零，也就是浏览器默认的值会被清除，这样我们可以再根据真正需要来设定元素的内外边距。

---

3.垂直方向上的外边距

• 在垂直方向上的外边距会叠加！！！

<style>
    p{margin-top:50px; margin-bottom:30px;}
</style>
...
<p>this</p>
<p>is</p>

它们之间的外边距不是80（50+30），而是50。也就是说它们相遇会相互叠加，较宽的外边距决定两个元素之间会离多远，没错它们的距离就是又较大的50决定，就是50px。

• 水平方向不叠加。

---

4.盒子有多大

• 没有宽度的盒子
  也就是没有显示的设置元素的with属性。

如果不设置块级元素的width属性，那么这个属性的默认值就是anto，结果就是和父元素同宽。现在起，“盒子”和“元素”代表同一个意思。

这时候给它添加水平边框、内边距和外边距会导致内容宽度减少，减少量等于添加之和。

总结：没有宽度的盒子实际占有的空间不变，你给它添加水平边框、内边距和外边距，那就会减少内容占有的空间。

• 有宽度的盒子
  显示设定width属性,如：{ width: 400px; }

为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。此时你给它添加水平边框、内边距和外边距，那就会增加盒子占有的空间。增加量等于添加的总和

总结：有宽度的盒子实际占有空间增加。也就是说width属性设置的实际不是盒子的宽度，而仅仅是盒子里内容的宽度。