CSS教程之：CSS外间距
通过margin属性，我们可以设置一个元素周围的空白。我们也可以设置一个负值，让两个元素重叠。 需要注意的是：两个相邻元素间的空白会被浏览器折叠，所以两个相邻元素间的空白间
通过margin属性，我们可以设置一个元素周围的空白。我们也可以设置一个负值，让两个元素重叠。
需要注意的是：两个相邻元素间的空白会被浏览器折叠，所以两个相邻元素间的空白间距不是两个元素各自间距的和，而是其中较大的一个。
我们可以通过如下四个属性设置空白：
下面看一些例子。
margin 属性：
通过margin属性，我们可以一次设置四个方向的空白。
下面我们以段落元素为例：
需要注意的是：两个相邻元素间的空白会被浏览器折叠，所以两个相邻元素间的空白间距不是两个元素各自间距的和，而是其中较大的一个。
我们可以通过如下四个属性设置空白：
margin-bottom : 指定底部空白
margin-top : 指定顶部空白
margin-left : 指定左边空白
margin-right : 指定右边空白
margin : 一次指定所有空白
margin-top : 指定顶部空白
margin-left : 指定左边空白
margin-right : 指定右边空白
margin : 一次指定所有空白
下面看一些例子。
margin 属性：
通过margin属性，我们可以一次设置四个方向的空白。
下面我们以段落元素为例：
<p style="margin: 15px; border:1px solid black;">
四个方向的空白都是15px
</p>
<p style="margin:10px 2%; border:1px solid black;">
顶部和底部空白是10px，
左边和右边空白是页面宽度的2%
</p>
<p style="margin: 10px 2% -10px; border:1px solid black;">
顶部空白是10px，
左边和右边空白是页面宽度的2%，
底部空白是-10px
</p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
顶部空白为10px，
右边为页面宽度的2%，
底部为-10px，
左边空白由浏览器自动设置
</p>margin-bottom属性：
通过margin-bottom属性，我们可以单独设置元素的底部空白，它的值可以是：指定高度，百分比，或auto：<p style="margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style="margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>而margin-top, margin-left, margin-right属性与margin-bottom属性一样，只是设置的空白间距位置不同，你可以分别测试一下看。 - 上一篇：CSS教程之：CSS边框
- 下一篇：CSS教程之：CSS列表
精彩图集
精彩文章