CSS - margin-bottom 属性

margin-bottom 属性设置元素底部边距的宽度。

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

可能的值

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

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

适用于

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

语法


margin-bottom = <length-percentage> | auto

CSS margin-bottom - 基本示例

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


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

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

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

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

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

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

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

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

CSS margin-bottom - 继承

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


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

打印本页