CSS margin-block-end Property

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

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

Syntax:

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

Property values

length: It sets a fixed value defined in px, cm, pt. Negative values 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-end Property

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

Example 1: The margin-block-end property adds a 20px margin at the end of the block direction, creating space after the purple box before the yellow box below it.

HTML

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

<head>
    <title>CSS margin-block-end 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;
        }

        .top {
            width: 110px;
            height: 80px;
            background-color: yellow;
            text-align: center;
            margin: auto;

            margin-block-end: 0;
        }

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

            /* Demonstrates the property */
            margin-block-end: 20px;
        }

        .bottom {
            width: 110px;
            height: 80px;
            background-color: yellow;
            text-align: center;
            margin: auto;
        }
    </style>

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

<body>
    <h1>GeeksforGeeks</h1>

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

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

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

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

</body>

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

Example 2: The margin-block-end property adds a 20px margin at the end of the block direction, creating space after the purple box according to the element's writing mode.

HTML

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

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

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

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

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

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

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

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

            margin-block-end: 20px;
        }

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

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

<body>
    <h1>GeeksforGeeks</h1>

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

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

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

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

</body>

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

CSS margin-block-end Property

Property values

Examples of margin-block-end Property

Explore