在网页布局中，CSS Margin属性起着至关重要的作用。掌握好Margin属性的用法，可以让你的网页布局看起来更加优美舒适。今天，我们就来一起学习一下如何使用CSS Margin属性优化网页布局。

一、Margin属性的作用

Margin（外边距）是CSS中用于控制元素与其他元素之间间距的属性，是元素边框外侧到其他元素边框内侧的距离，一般可被浏览器解释为透明区域。 Margin属性控制块级元素的位置和外观，让元素能够按照设计师想要的方式出现在网页上。

二、Margin属性的使用方法

Margin属性有四个方向的属性值：margin-top、margin-right、margin-bottom和margin-left。 以margin-top为例，示意图如下：


由此可见，Margin属性值可为：

1、auto（浏览器自动计算margin值）

2、 （像素或em）

3、（长度的百分比）

例如，设定margin-top的值为10px， 意味着距离上方元素的距离为10像素的间隔。同时， margin值无需设置为正值，设置为负值时，元素会向相应方向移动。

三、Margin属性的应用

1、调整元素与网页之间的距离

通过对各个方向的Margin属性进行调整，可以把元素与网页上的其他元素、边框和边缘之间的距离设置得更合理。例如，在一个元素之前或之后添加一定的Margin值，可以控制这个元素与其他元素之间的距离，使页面布局更加舒适自然。

下面，我们使用Margin属性将两个元素之间的距离设置为30像素。

```HTML