CSS - margin-inline-end 属性_CSS 菜鸟教程

元素的逻辑内联结束边距由 CSS 属性 margin-inline-end 指定。这对应于由元素的文本方向、方向性和书写样式确定的物理边距。

与 margin-inline-start 类似，它对应于 margin-left、margin-top、margin-right 或 margin-bottom，具体取决于给定的书写模式、方向和文本方向的值。
它与元素的其他边距相关，这些边距由 margin-block-start、margin-block-end 和 margin-inline-start 定义。

可能的值

以下列表涵盖了 margin-inline-end 属性的所有可能值，这些值类似于 margin-left 属性。

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

适用于

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

语法

margin-inline-end = <'margin-top'>

CSS margin-inline-end - 长度值

以下示例演示了 margin-inline-end 与长度值的用法。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F1F1F1;
	 	}
	 	#Container {
	 	 	 height: 280px;
	 	 	 background-color: #dcdce0;
	 	}
	 	#Container > div {
	 	 	 width: 150px;
	 	 	 height: 200px;
	 	 	 float: left;
	 	 	 box-sizing: border-box; 	
	 	}
	 	.marginDemo {
	 	 	 background-color: #d19d9b;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline-end: 25px;
	 	}
	 	.marginBox {
	 	 	 background-color: #bd342f;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 30px;
	 	 	 padding: 20px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
	 	<div class="marginBox">Alpha Box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline-end property.
	 	 	 </div>
	 	<div class="marginBox">Beta Box</div>
</div>
</body>
</html>

CSS margin-inline-end - 百分比值

以下示例演示了 margin-inline-end 与百分比值的用法。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F1F1F1;
	 	}
	 	#Container {
	 	 	 height: 280px;
	 	 	 background-color: #dcdce0;
	 	}
	 	#Container > div {
	 	 	 width: 150px;
	 	 	 height: 200px;
	 	 	 float: left;
	 	 	 box-sizing: border-box;
	 	 		
	 	}
	 	.marginDemo {
	 	 	 background-color: #9c9a84;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline-end: 5%;
	 	}
	 	.marginBox {
	 	 	 background-color: #f7e702;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 30px;
	 	 	 padding: 20px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
	 	<div class="marginBox">Alpha Box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline-end property.
	 	 	 </div>
	 	<div class="marginBox">Beta Box</div>
</div>
</body>
</html>

CSS margin-inline-end - 自动值

以下示例演示了 margin-inline-end 与自动值和写入模式的用法：vertical-rl。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F1F1F1;
	 	}
	 	#Container {
	 	 	 height: 280px;
	 	 	 background-color: #cffac3;
	 	}
	 	#Container > div {
	 	 	 width: 150px;
	 	 	 height: 200px;
	 	 	 float: left;
	 	 	 box-sizing: border-box;
	 	 		
	 	}
	 	.marginDemo {
	 	 	 background-color: #29a108;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline-end: auto;
	 	 	 writing-mode: vertical-rl;
	 	}
	 	.marginBox {
	 	 	 background-color: #9ebf95;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 30px;
	 	 	 padding: 20px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
	 	<div class="marginBox">Box A</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline-end property.
	 	 	 </div>
	 	<div class="marginBox">Box B</div>
</div>
</body>
</html>

<< CSS - margin-inline 属性 CSS - margin-inline-start 属性 >>