margin-block-start

最新推荐文章于 2023-02-13 13:11:22 发布

sfanxi

最新推荐文章于 2023-02-13 13:11:22 发布

阅读量1.9k

点赞数 1

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_36366212/article/details/120352316

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

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>