元素的逻辑块结束边距由 margin-block-end CSS 属性指定，该属性根据元素的写入模式、方向性和文本方向转换为物理边距。
根据为 writing-mode direction和text-orientation给定的值，它对应于margin-left、margin-top、margin-right 或 margin-bottom 属性。
它与元素 margin-block-start、margin-inline-start 和 margin-inline-end相关，指定元素的剩余边距。
属性值
以下列表涵盖了与 margin-left 属性类似的 margin-block-end 属性的所有可能值。
<length>: 边距大小的固定值。
<percentage> -相对于所包含块的内联大小或水平语言中writing-mode定义的宽度测量的边距百分比。
auto: 可用水平空间的百分比分配给左边距，所选的布局选项起着关键作用。
margin-right 值在两者都设置时相等
适用范围
所有元素，除了带有 table-caption table 和 inline-table 之外的表格显示类型的元素。它也适用于::first-letter。。它也适用于 ::first-letter。
语法
margin-block-end = <'margin-top'> CSS margin-block-end: 长度值
以下示例演示了 margin-block-end 与长度值的用法。
<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-end: 25px;
}
.marginBox {
width: 250px;
background-color: #F3994D;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>橙色 div 元素强调紫色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block-end 属性示例
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
CSS margin-block-end: 百分比值
以下示例演示了 margin-block-end 与百分比值的用法。
<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-end: 20%;
}
.marginBox {
width: 250px;
background-color: #f5d902;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>黄色 div 元素强调绿色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block-end 属性示例
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
CSS margin-block-end: auto Value
以下示例演示了具有 auto 值的 margin-block-end 的用法。
<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-end: auto;
}
.marginBox {
width: 250px;
background-color: #FFA07A;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block-end 属性示例
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
CSS margin-block-end: writing-mode
以下示例演示了具有长度值和写入模式:vertical-rl margin-block-end 的用法。
<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-end: 20px;
writing-mode: vertical-rl;
}
.marginBox {
width: 150px;
background-color: #FF9A8B;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
<div class="marginBox">box</div>
<div class="marginDemo">
margin-block-end 属性示例
</div>
<div class="marginBox">box</div>
</div>
</body>
</html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37