动画 CSS margin-left 属性

什么是margin-left属性？

margin-left是CSS中用来设置元素左侧外边距的属性。它可以为元素设置左侧的间距，使元素与其父元素或相邻的元素之间产生一定的距离。

margin-left的用法

margin-left属性可以分别为每个方向设置值，或者用以下方法为四个方向同时设置值：

margin-left:值;                   /* 给左侧设置一个固定的值 */
margin-left:百分比;               /* 给左侧设置相对于父元素宽度的百分比值 */
margin-left:auto;                 /* 左侧外边距自动调整为剩余空间的一半 */
margin：上 右 下 左；            /* 为四个方向同时设置值 */

下面我们将详细介绍margin-left的用法。

给左侧设置一个固定的值

使用margin-left属性可以很容易地为元素左侧设置一个固定的值，单位可以是像素(px)、点数(pt)或em。例如，下面的代码将为#box元素左侧增加20像素的外边距：

#box {
    margin-left: 20px;
}

结果如下图所示：

我们可以看到，在#box元素左侧产生了20像素的间距。

给左侧设置相对于父元素宽度的百分比值

使用百分比值设置元素的外边距可以很方便地使其适应不同的屏幕大小。例如，下面的代码将为#box元素左侧设置相对于其直接父元素宽度的30%的外边距：

#box {
    margin-left: 30%;
}

结果如下图所示：

我们可以看到，左侧的外边距已经变成了父元素宽度的30%。

左侧外边距自动调整为剩余空间的一半

当我们需要让一个元素居中时，可以使用margin-left:auto和margin-right:auto来实现。例如，下面的代码将使#box元素水平居中（前提是该元素的宽度小于父元素宽度）：

#box {
    width: 300px;                   /* 设置#box元素宽度为300像素 */
    margin-left: auto;
    margin-right: auto;             /*左右外边距都为auto，实现水平居中*/
}

结果如下图所示：

我们可以看到，#box元素已经水平居中了。

为四个方向同时设置值

当我们需要为一个元素的四个方向分别设置外边距时，可以使用margin属性。该属性的用法如下：

margin:上 右 下 左；    

例如，下面的代码将为#box元素分别设置10像素的外边距：

#box {
    margin: 10px;
}

结果如下图所示：

我们可以看到，#box元素四周都产生了10像素的外边距。

总结

margin-left属性可以用来控制元素左侧的外边距，通过设置一个固定值或百分比值、自动调整或为四个方向同时设置值，我们可以为元素设置适当的外边距。

需要注意的是，当元素的position属性值为absolute或fixed时，margin-left属性无效。