CSS - margin-left 属性

CSS margin-left 属性设置元素左侧边距的宽度。

正值使其远离相邻元素，而负值使其更接近。

可能的值

以下列表涵盖了 margin-left 属性的所有可能值。

<length> - 边距大小的固定值。
<percentage> - 相对于包含块的内联大小或水平语言中写入模式定义的宽度所测量的边距的百分比。
auto - 将一定百分比的可用水平空间分配给左边距，所选的布局选项起着至关重要的作用。margin-left 和 margin-right，当两者都设置为 AUTO 时，值相等。

适用于

所有元素（具有表格的元素除外）显示类型不是 table-caption、table 和 inline-table。它也适用于 ::first-letter。

语法


margin-left = <length-percentage> | auto

CSS margin-left - 基本示例

下面是一个示例，其中所有可以传递给 margin-left CSS 属性的不同值：


<html>
<head>
<style>
	 	p {
	 	 	 background-color: rgb(201, 238, 240);
	 	 	 border: 1px solid black;
	 	 	 width: fit-content;
	 	}

	 	.margin-px {
	 	 	 margin-left: 30px;
	 	}

	 	.margin-perc {
	 	 	 margin-left: 10%;
	 	}

	 	.margin-em {
	 	 	 margin-left: 3em;
	 	}

	 	.margin-auto {
	 	 	 margin-left: auto;
	 	}

	 	.margin-neg {
	 	 	 margin-left: -10px;
	 	}
</style>
</head>
	 	
<body>
	 	<p class="margin-px">
	 	 	 The left margin is 30px.
	 	</p>
	 	
	 	<p class="margin-perc">
	 	 	 The left margin is 10%.
	 	</p>
	 	
	 	<p class="margin-em">
	 	 	 The left margin is 3em.
	 	</p>
	 	
	 	<p class="margin-auto">
	 	 	 The left margin will be set by the browser.
	 	</p>
	 	
	 	<p class="margin-neg">
	 	 	 The left margin is -10px.
	 	</p>
</body>
</html>

继承 - 当您希望子元素的左边距与其父元素的左边距匹配时，请使用属性 inherit。

注意：继承值只能用于子元素，而不能用于父元素。

CSS margin-left - 继承

下面是一个示例，其中子元素的左边距继承自父元素-


<html>
<head>
<style>
	 	.p {
	 	 	 margin-left: 20%;
	 	}
	 	
	 	p.example {
	 	 	 margin-left: inherit;
	 	 	 border: 1px solid #4CAF50;
	 	}
</style>
</head>
<body>
<h3>margin-left property - inherit</h3>	
	 	<p>The margin-left is 20% for parent element.</p>
	 	<p class="example">A child element where the left margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>

打印本页