本文主要包含css盒子等相关知识,VictoriaHarbor的博客希望在学习及工作中可以帮助到您
内边距是盒子内容与边框之间的距离，如果你不设定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属性设置的实际不是盒子的宽度，而仅仅是盒子里内容的宽度。