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

简写 CSS 属性 margin-inline 结合了元素的逻辑内联开始边距和结束边距的描述。

元素的书写风格、方向性和文本方向是影响实际物理边距的一些变量。

内联方向垂直于块方向。在 horizontal-tb 写入模式（大多数语言的默认设置）中，内联方向为水平（从左到右）。在垂直 rl 书写模式（通常用于日语等语言）中，内联方向是垂直的（向上和向下）。

此属性的行为类似于 margin-top 和 margin-bottom 或 margin-right 和 margin-left 属性，具体取决于为写入模式、方向和文本方向指定的值。
可以为 margin-inline 属性定义一个或两个值。
使用单个值时，开始和结束都具有相同的边距。当使用两个值时，第一个值适用于开始值，第二个值应用于结束值。

成分属性

此属性是以下 CSS 属性的简写：

可能的值

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

<length> - 边距大小的固定值。
<percentage> - 相对于所包含块的内联大小或水平语言中书写模式定义的宽度所测量的边距的百分比。
auto - 浏览器选择要应用的适当边距。例如，此值有时可用于将元素居中。

适用于

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

语法

margin-inline = <'margin-top'>{1,2}

CSS margin-inline - 长度值

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

<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: #f57f5b;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline: 25px;
	 	}
	 	.marginBox {
	 	 	 background-color: #69a8f0;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - 百分比值

以下示例演示了 margin-inline 和 percentage value 的用法。

<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: #de6be8;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline: 5% 6%;
	 	}
	 	.marginBox {
	 	 	 background-color: #c6f086;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - 自动值

以下示例演示了 margin-inline 与值 auto 的用法。

<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: #eb2a1c;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline: auto;
	 	}
	 	.marginBox {
	 	 	 background-color: #04bf52;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - 写作模式

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

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F1F1F1;
	 	}
	 	#Container {
	 	 	 height: 280px;
	 	 	 background-color: #dcdce0;
	 	}
	 	#Container > div {
	 	 	 width: 150px;
	 	 	 height: 250px;
	 	 	 float: left;
	 	 	 box-sizing: border-box;
	 	}
	 	.marginDemo {
	 	 	 background-color: #eb2a1c;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 margin-inline: 0px;
	 	 	 writing-mode: vertical-rl;
	 	}
	 	.marginBox {
	 	 	 background-color: #04bf52;
	 	 	 border: solid 3px #46262A;
	 	 	 text-align: center;
	 	 	 font-size: 20px;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
	 	<div class="marginBox">box</div>
	 	 	 <div class="marginDemo">
	 	 	 	 	Example of css margin-inline property.
	 	 	 </div>
	 	<div class="marginBox">box</div>
</div>
</body>
</html>

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