css : div - padding,border,margin

padding

padding---内边距。

padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。

也就是说，background-color将填充所有border以内的区域。

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性:

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

复合属性：

top上、right右、bottom下、left左。（顺时针）

这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。

padding:top right botton left;

一些标签默认带有padding属性，所以，我们为了做网站的时候，便于控制，总是喜欢清除这个默认的padding：

*{

margin: 0;

padding: 0;

}

margin

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

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;}

border

border: 粗细 线性 颜色；

边框有三个要素：粗细、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，将显示不出来边框。

border是一个大综合属性，

border:1px solid red;

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

border-top-width:10px;

border-top-style:solid;

border-top-color:red;

border-right-width:10px;

border-right-style:solid;

border-right-color:red;

border-bottom-width:10px;

border-bottom-style:solid;

border-bottom-color:red;

border-left-width:10px;

border-left-style:solid;

border-left-color:red;

等价于

border:10px solid red;

border可以没有，

border:none;

某一条边没有：

border-left: none;

也可以调整左边边框的宽度为0：

border-left-width: 0;