MDN :CSS 属性定义了一个元素的逻辑块的开始边距, 是用来根据元素的书写模式(writing-mode
),方向(direction
)和文本方向(text-orientation
)进行实际边界的衡量。
By default, you will have the following mapping:
margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-right
Example:
Now if we change the writing mode, you will see that we will have a different mapping.
In the above, you will notice when using vertical-lr
a mapping equal to
margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top
margin-inline-end = margin-bottom
and when using vertical-rl
margin-block-start = margin-right
margin-block-end = margin-left
margin-inline-start = margin-top
margin-inline-end = margin-bottom
摘自: html - What is the difference between margin-block-start and margin-top? - Stack Overflow
<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-block-start Property</title>
<style>
div.text-center {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.bg {
background-color: yellow;
width: 120px;
height: 80px;
}
.two.bg {
margin-top:20px;
/* 与书写模式相关 书写模式从上到下,从左到右(writing-mode: vertical-lr),margin-block-start就相当于margin-left */
margin-block-start: 20px;
writing-mode: vertical-lr;
background-color: purple;
}
</style>
</head>
<body>
<div class="text-center">
<b>CSS | margin-block-start Property</b>
<br><br>
<div class="one bg">GeeksforGeeks</div>
<div class="two bg">GFG</div>
<div class="three bg">GeeksforGeeks</div>
</div>
</body>
</html>