盒模型（Box Model）

盒模型由元素内容，内边距，外边距，边框组成。

一、内边距（padding）

.box{

          padding-top:10px;

          padding-right:15px;

          padding-bottom:12px;

          padding-left:20px;

        }

复合后：

.box{padding:10px 15px 12px 20px;}  /*(上，右，下，左，顺时针表示)*/

另外表达的含义：

.box{padding:10px 15px 12px;} /*(上，左右，下)*/

.box{padding:10px 12px;} /*(上下，左右)*/

二、外边距（magin）

1.外边距的规则与内边距一样。

2.外边距可以用负值表示；内边距则不可以。

magin-top：-100px;

3.magin:0 auto; /*居中（上0 左auto 下0 右auto）*/

三、边框（border）

每个边框有 3 个要素：宽度、样式及颜色。

.box{

         border-color:#f00;

         border-width:1px;

         border-style:solid;

        }

复合后：

.box{border:#f00 1px solid;}

每个要素也可以分成上下左右：

例如：border-top-color：#f00;

          border-left-style:dotted;

          border-bottom-width:2px;

四、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。