CSS margin-block-start Property

The margin-block-start property is used to define the logical block start margin of element. This property helps to place margin depending on the element's writing mode, directionality, and text orientation.

Sets the margin at the start of the block direction.
Adapts automatically to different writing modes and text directions.
Helps create flexible and internationalized layouts.

Syntax:

margin-block-start: length | auto | initial | inherit;

Property values

length: It sets the fixed value defined in px, cm, pt. Negative values as mentioned earlier are allowed. 0px is the default value.
auto: It is used when it is desired that the browser determines the width of the left margin.
initial: It is used to set the value of the margin-left property to its default value.
inherit: It is used when it is desired that the element inherit the margin-left property of its parent as its own.

Examples of margin-block-start Property

Below examples illustrate the margin-block-start property in CSS:

Example 1: The margin-block-start property adds a 20px margin before the purple box, creating space between it and the yellow box above.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS margin-block-start Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background-color: #dcdcdc;
            font-family: "Times New Roman", serif;
        }

        h1 {
            color: green;
            text-align: center;
            font-size: 32px;
            margin-bottom: 20px;
        }

        h2 {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .box1,
        .box2 {
            width: 110px;
            height: 110px;
            background-color: yellow;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        .box1 {
            line-height: 30px;
        }

        .box2 {
            line-height: 30px;
        }

        .middle {
            width: 110px;
            height: 85px;
            background-color: purple;
            color: black;
            text-align: center;
            margin-left: auto;
            margin-right: auto;

            margin-block-start: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS | margin-block-start Property</h2>

    <div class="box1">
        GeeksforGeeks
    </div>

    <div class="middle">
        GFG
    </div>

    <div class="box2">
        GeeksforGeeks
    </div>

</body>

</html>
<!--Driver Code Ends-->

Example 2: The margin-block-start property adds a 20px margin at the start of the block direction, creating space before the purple box based on the element's writing mode.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS | margin-block-start Property</title>
    <style>
        body {
            background-color: #dcdcdc;
            font-family: "Times New Roman", serif;
            position: relative;
            height: 380px;
        }

        h1 {
            color: green;
            text-align: center;
            font-size: 32px;
            margin-bottom: 20px;
        }

        h2 {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .box1,
        .box2 {
            width: 110px;
            height: 80px;
            background: yellow;
            text-align: center;
            margin: auto;
        }

        .middle {
            width: 110px;
            height: 80px;
            background: purple;
            position: absolute;
            right: 10px;
            top: 180px;

            writing-mode: vertical-rl;
            text-align: center;

            margin-block-start: 20px;
        }

        .box2 {
            margin-top: 80px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS | margin-block-start Property</h2>

    <div class="box1">GeeksforGeeks</div>

    <div class="middle">GFG</div>

    <div class="box2">GeeksforGeeks</div>

</body>

</html>

CSS margin-block-start Property

Property values

Examples of margin-block-start Property

Explore