margin-left 属性用于定义元素的左边距将被设置多少。
在定义宽度、左边距、边框、填充、内容区域和右边距时，有一些罕见的情况。
当发生这种情况时，margin-left 将被忽略，并将被设置为好像定义了 auto 值。
margin-left 属性定义为关键字 <auto>、<percentage> 或者 <length>。
它的值可以是负数、正数或者零。
允许负值。
| 初始值 | 0. |
|---|---|
| 应用于 | 所有元素。它还适用于::first-letter伪元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。元素的左边缘是有动画的。 |
| 版本 | CSS2. |
| DOM 语法 | Object.Style.marginleft =“20px”; |
CSS margin-left 属性值说明
| 值 | 描述 |
|---|---|
| auto | 设置左边缘。这是此属性的默认值。 |
| length | 在PX，Pt，cm等中定义左边缘。默认值为0。 |
| % | 将左边距设置为包含元素的％。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
margin-left: length | auto | initial | inherit;
定义为“px”的 margin-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.left {
margin-left: 25px;
}
</style>
</head>
<body>
<h2>Margin-left 属性示例</h2>
<p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<p class="left">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
定义为“em”的 margin-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.left {
margin-left: 8em;
}
</style>
</head>
<body>
<h2>Margin-left 属性示例</h2>
<p>是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
<p class="left">是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
定义为“px”、“em”和“%”的 margin-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p.p1 {
margin-left: 6em;
}
p.p2 {
margin-left: 40px;
}
p.p3 {
margin-left: 10%;
}
</style>
</head>
<body>
<h2>Margin-left 属性示例</h2>
<p>No specified margin.</p>
<p class="p1">把痛苦停在昨天 把微笑留给明天。</p>
<p class="p2">把痛苦停在昨天 把微笑留给明天。</p>
<p class="p3">把痛苦停在昨天 把微笑留给明天。</p>
<p>No specified margin</p>
</body>
</html>
日期：2020-06-02 22:14:38 来源：oir作者：oir