CSS - margin-top 属性

margin-top 属性设置元素顶部边距的宽度。

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

可能的值

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

<length> - 边距大小的固定值。
<percentage> - 相对于包含块的内联大小或水平语言中写入模式定义的宽度所测量的边距的百分比。
auto - 浏览器选择一个合适的值自行使用。

适用于

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

语法

margin-top = <length-percentage> | auto

CSS margin-top - 基本示例

以下示例显示了可以传递给 margin-top CSS 属性的不同值：


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

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

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

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

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

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

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

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

CSS margin-top - 继承

下面是一个示例，其中子元素的 margin-top 继承自父元素-


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

打印本页