盒模型

以下属性都有上下左右四个方向：
内边距：padding
外边距：margin
边框：border
1.边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

div{border:2px  solid  red;}

等同于

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注：
（1）border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
（2）border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
（3）border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
2.为标签单独设置单方向边框

标签{border-bottom:1px solid red;}

3.填充

div{padding:20px 10px 15px 30px;}

等同于

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}-----------顺时针

如果上、右、下、左的填充都为10px，可为：div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可为：div{padding:10px 20px;}
4.外边距

div{margin:20px 10px 15px 30px;}

等同于

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}-----------顺时针

如果上、右、下、左的填充都为10px，可为：div{margin:10px;}
如果上下填充一样为10px，左右一样为20px，可为：div{margin:10px 20px;}