Skip to content
Related Articles

Related Articles

Improve Article

CSS | margin-block-start Property

  • Last Updated : 17 Feb, 2021

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
  • Internet Explorer
  • Mozilla Firefox

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :