盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，盒子模型就是使用显示中盒子来做比喻，帮助我们设置元素对应的样式。把元素叫做盒子，设置对应的样式分别为：盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子与盒子之间的间距（margin）。

设置边框

设置一遍的边框，比如顶部边框，可以按如下设置

border-top:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding：20px 40px 50px 30px; /*

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /*

设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/

padding：20px; /* 设置四边内边距为20px 

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法