(2) 使用百分比（%）单位

除了像素单位值，我们还可以使用百分比单位值来设置margin-left属性。在这种情况下，margin-left将根据父容器的宽度和元素的宽度进行计算。

例如，我们可以定义一个块级元素左侧空白距离占到父容器宽度的30%。如下所示：

```

div {

margin-left: 30%;

}

```

在这个例子中，左侧空白区域的宽度将根据父容器宽度的30%计算得出。这种方法可以使用百分比来控制元素的位置，使得它们在不同的终端上有着不错的体验。

(3) 使用em单位

我们还可以使用em单位值来设置margin-left属性。在这种情况下，margin-left将取决于元素的字体大小。例如，如果我们将字体大小设置为16px，并指定margin-left属性为2em，则左侧空白距离将占据32像素（2 × 16）。

```

div {

font-size: 16px;

margin-left: 2em;

}

```

在本例中，左侧空白区域的宽度将占据元素字体大小的2倍。

三、应用案例

1.实现悬挂缩进

悬挂缩进是一种排版形式，通常在书籍、报纸、杂志等设计中出现。它的基本特点是每行文字开头缩进，同时除了第一行，每一行的左侧边距都向左偏移。

要实现悬挂缩进可以使用text-indent和负margin-left两个属性来设置。例如，我们可以将离我们最近的父级容器设定一个负的margin-left属性，以为悬挂缩进的第一行从容器外部开始。

```

article {

margin-left: -20px;

text-indent: 20px;

}

```

在上述实例中，article中的第一行将与其所在的容器的第一行左对齐，而其余行则向左缩进20像素。这种方式更适合各种文章内容的排版方式。

2.中心对齐

有时候，我们希望某个元素在其父级容器内实现水平对齐。我们可以使用margin-left和margin-right属性来实现中心对齐。例如，下面这个例子将在当前元素的父级容器中实现水平居中。

```

div {

margin-left: auto;

margin-right: auto;

}

```

在上述例子中，margin-left和margin-right都使用auto值，在这种情况下，父级容器会平均分配两侧的边距，从而实现了水平居中。

3.应用于li元素

在有序列表和无序列表中，我们通常使用