CSS - margin-right 属性

margin-right 属性设置元素右侧边距的宽度。

邻域之间的间隔值随着正值的增加而增加，随着负值的增加而减少

可能的值

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

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

适用于

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

语法


margin-right = <length-percentage> | auto

CSS margin-right - 基本示例

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


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

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

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

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

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

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

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

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

CSS margin-right - 继承

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


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

打印本页