元素的逻辑块开始和结束边距由 margin-block CSS 简写属性指定。
元素的书写模式、方向性和文本方向决定了这些逻辑边距如何转换为物理边距。
根据为writing-mode、direction和text-orientation提供的值，此属性指的是 margin-top 和 margin-bottom 或 margin-right 和 margin-left属性。
margin-block 属性允许使用一个或两个值。对于一个值，它对开始和结束应用相同的边距。当指定两个值时，第一个值应用于开始，第二个值应用于结束。
构成属性
此属性是以下 CSS 属性的简写:
属性值
以下列表涵盖了 margin-block 属性的所有可能值。
<length>: 边距大小的固定值。
<percentage>: 相对于所包含块的内联大小或水平语言中书写模式定义的宽度测量的边距百分比。
auto: 浏览器选择要应用的适当边距。例如，此值有时可用于使元素居中。
适用范围
除 table-caption、table 和 inline-table 之外的表 display 类型的元素之外的所有元素。它也适用于 ::first-letter。
语法
margin-block = <'margin-top'>{1,2} CSS margin-block: 长度值
以下示例演示了 margin-block 与长度值的用法。
<html>
<head>
<style>
body {
background-color: #dfe4ed;
}
#customDIV {
height: 400px;
background-color: #edecb7;
padding: 20px;
}
.marginDemo {
width: 250px;
background-color: #65f252;
border: 2px dashed #4682B4;
margin-block: 25px;
}
.marginBox {
width: 250px;
background-color: #f5d902;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1> margin-block 属性</h1>
<div id="customDIV">
<p>黄色 div 元素强调绿色框周围的边距。</p>
<div class="marginDemo">box</div>
<div class="marginBox">
margin-block 属性示例.
</div>
<div class="marginDemo">box</div>
</div>
</body>
</html> CSS margin-block: 百分比值
下面的示例演示了带有百分比值的 margin-block 的用法。
<html>
<head>
<style>
body {
background-color: #F1ECEC;
}
#customDIV {
height: 400px;
background-color: #FFF7B0;
padding: 20px;
}
.marginDemo {
width: 250px;
background-color: #8B78B6;
border: 2px dashed #4682B4;
margin-block: 4% 6%;
}
.marginBox {
width: 250px;
background-color: #F3994D;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1> margin-block 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调紫色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block 属性示例.
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> CSS margin-block: 使用自动值
下面的示例演示了带有值的 margin-block 的用法auto.
<html>
<head>
<style>
body {
background-color: #F2EFEF;
}
#customDIV {
height: 400px;
background-color: #FFEEA8;
padding: 20px;
}
.marginDemo {
width: 250px;
background-color: #6495ED;
border: 4px dashed #4682B4;
margin-block: 2rem auto;
}
.marginBox {
width: 250px;
background-color: #FFA07A;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1> margin-block 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block 属性示例.
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> CSS margin-block: 使用写入模式
以下示例演示了使用长度值和写入模式:vertical-rl 的 margin-block 的用法。
<html>
<head>
<style>
body {
background-color: #E3EAE9;
}
#customDIV {
height: 500px;
background-color: #FFEACB;
padding: 20px;
}
.marginDemo {
width: 50px;
background-color: #87CEEB;
border: 4px dashed #2E517F;
margin-block: 20px 20px;
writing-mode: vertical-rl;
}
.marginBox {
width: 150px;
background-color: #FF9A8B;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1> margin-block 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block 属性示例
</div>
<div class="marginBox">box</div>
</div>
</body>
</html>