Open In App
Related Articles

CSS | margin-block-start Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

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.

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

Example 1:  

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | margin-block-start Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: yellow;
            width: 110px;
            height: 80px;
        }
        .two {
              margin-block-start: 20px;
              background-color: purple;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | margin-block-start Property</b>
        <br><br>
        <div class="one">GeeksforGeeks</div>
        <div class="two">GFG</div>
        <div class="three">GeeksforGeeks</div>
    </center>
</body>
</html>

                    

Output: 

Example 2:  

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | margin-block-start Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: yellow;
            width: 110px;
            height: 80px;
        }
        .two {
            margin-block-start: auto;
            writing-mode: vertical-lr;
            background-color: purple;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | margin-block-start Property</b>
        <br><br>
        <div class="one">GeeksforGeeks</div>
        <div class="two">GFG</div>
        <div class="three">GeeksforGeeks</div>
    </center>
</body>
</html>

                    

Output: 

Supported Browsers: The browser supported by margin-block-start property are listed below:  

  • Google Chrome 87+
  • Edge 87+
  • Firefox 41+
  • Opera 73+
  • Safari 12.1+


Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads