CSS 属性 margin-inline 简写结合了元素逻辑内联开始和结束边距的描述。
元素的书写风格、方向性和文本方向是影响实际物理边距的一些变量。
内联方向垂直于块方向。在horizontal-tb书写模式（大多数语言的默认模式）下，内联方向是水平的（从左到右）。在vertical-rl书写模式下（通常用于日语等语言），内联方向是垂直的（向上和向下）。
此属性的行为相当于 margin-top 和 margin-bottom 或 margin-right 和 margin-left 属性，具体取决于为writing-mode、direction和text-orientation 指定的值。
可以为 margin-inline 属性定义一个或两个值。
使用单个值时，开始和结束都具有相同的边距。当使用两个值时，第一个适用于开始，第二个适用于结束。
构成属性
此属性是简写对于以下 CSS 属性:
属性值
以下列表涵盖了 margin-inline 属性的所有可能值。
<length>: 边距大小的固定值。
<percentage>: 相对于所包含块的内联大小或水平语言中书写模式定义的宽度测量的边距百分比。
auto: 浏览器选择要应用的适当边距。例如，此值有时可用于使元素居中。
适用范围
除 table-caption、table 和 inline-table 之外的表 display 类型的元素之外的所有元素。它也适用于 ::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">
css margin-inline 属性示例。
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> 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: #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>margin-inline 属性.</h1>
<div id="Container">
<div class="marginBox">box</div>
<div class="marginDemo">
css margin-inline 属性示例。
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> CSS margin-inline: auto
下面的示例演示了 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> margin-inline 属性.</h1>
<div id="Container">
<div class="marginBox">box</div>
<div class="marginDemo">
css margin-inline 属性示例。
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> CSS margin-inline: writing-mode
以下示例演示了 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>margin-inline 属性.</h1>
<div id="Container">
<div class="marginBox">box</div>
<div class="marginDemo">
css margin-inline 属性示例。
</div>
<div class="marginBox">box</div>
</div>
</body>
</html>