CSS基础教程（十二） 外边距margin

一、margin介绍

如上图，margin设置的边框外面的距离，margin是没有背景颜色的完全透明，但是它常常被用来设置与其他元素之间的距离，以此来达到排版的目的。

二、margin值

在margin中可以设置的值有

1、auto（设置浏览器边距，具体需要看浏览器）；

2、像素值，比如说10px   5em,均可以；

3、百分比值，比如果10%

PS：margin的值可以是负值，表示与正值相反方向。

三、设置某一边margin值

在margin的实际运用中，很少直接使用margin属性，因为其设置的是一个标签元素的四周，这样不好操控，以便实际使用的都是其某一边的值：

1、margin-top：设置上外边距；

2、margin-right：设置右外边距；

3、margin-bottom：设置下外边距；

4、margin-left：设置左外边距；

也可以使用其简写属性：

margin:100px;    /*表示上下左右外边距均为100px*/
margin:100px 50px;    /*表示上下为100px 左右为50px*/
margin:100px 50px 80px;    /*表示上外边距为100px 右为50px 下为80px*/
margin:100px 50px 60px 80px;    /*表示上为100px 右为50px 下为60px 左为80px*/

四、属性一览