元素的逻辑内联结束边距由 CSS 属性 margin-inline-end 指定。这对应于由元素的文本方向、方向性和书写风格确定的物理边距。
与 margin-inline-start 类似，它对应于margin-left，margin-top，margin-right或margin-bottom，基于给定的 writing-mode direction和text-orientation 值。
它与元素的其他边距有关，这些边距由 margin-block-start 、margin-block-end 和 margin-inline -start 定义.
属性值
以下列表涵盖了 margin-inline-end 属性的所有可能值，类似于margin-left 属性。
<length>: 边距大小的固定值。
<percentage>: 相对于所包含块的内联大小或 writing-mode 定义的水平宽度测量的边距百分比语言。
auto: 可用水平空间的百分比分配给左边距，选择的布局选项起着关键作用。
margin-left 和 margin-right 值之间的间距为当两者都设置为 auto 时相等。
适用范围
所有元素，除了带有 table-caption table 和 inline-table 之外的表格显示类型的元素。它也适用于::first-letter。。它也适用于 ::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>margin-inline-end 属性例子.</h1>
<div id="Container">
<div class="marginBox">Alpha Box</div>
<div class="marginDemo">
css margin-inline-end 属性示例。
</div>
<div class="marginBox">Beta 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
- 38
- 39
- 40
- 41
- 42
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>margin-inline-end 属性例子.</h1>
<div id="Container">
<div class="marginBox">Alpha Box</div>
<div class="marginDemo">
css margin-inline-end 属性示例。
</div>
<div class="marginBox">Beta 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
- 38
- 39
- 40
- 41
- 42
- 43
CSS margin-inline-end: auto
以下示例演示了 margin-inline-end 与 auto 值和书写模式: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>margin-inline-end 属性例子.</h1>
<div id="Container">
<div class="marginBox">Box A</div>
<div class="marginDemo">
css margin-inline-end 属性示例。
</div>
<div class="marginBox">Box B</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
- 38
- 39
- 40
- 41
- 42
- 43
- 44