CSS - margin-block Property

Previous
Quiz

CSS margin-block property sets the vertical margins of an element, which are the margins applied to the block-start and block-end sides of the element. It is a shorthand property for defining the values of properties: margin-block-start and margin-block-end in one single statement. The direction of the margin is affected by writing-mode property.

Syntax

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

Property Values

ValueDescription
autoThe browser sets the margin for block-start and block-end edges automatically.
lengthThe width of the margin-block is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentageThe width of the margin-block is set using percentage values (e.g. 10%) relative to the containing element.
initialIt sets the property to its default value.
inheritIt inherits the property from the parent element.

Examples of CSS Margin Block Property

The following examples explain the margin-block property with different values.

Margin Block Property with Auto Value

To allow the browser to automatically calculate the margin based on the available space, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         text-align: center;
      }

      .auto {
         margin-block: auto;
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: auto
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="auto demo">
         This box has both block-start and 
         block-end edges margin = auto.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Margin Block Property with Length Values

To set the margin at the block-start and block-end edges of an element, we can specify the margin size using length units (e.g. px, em, rem etc.). It accepts upto two values. Depending on the number of values specified, the margin size will be applied to the edges. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 240px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }

      .single-value {
         margin-block: 16px;

      }

      .double-value {
         margin-block: 30px 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 16px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value demo item">
         This box has both block-start and 
         block-end edges margin = 16px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 30px 60px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="double-value demo item">
         This box has block-start margin = 30px 
         and and block-end margin = 60px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Margin Block Property with Percentage Values

To set the margin at the block-start and block-end edges of an element, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). It accepts upto two values. Depending on the number of values specified, the margin size will be applied to the edges. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 240px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }

      .single-value {
         margin-block: 6%;

      }

      .double-value {
         margin-block: 4% 10%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 6%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value demo item">
         This box has both block-start and block-end 
         edges margin = 6% of the container height.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 4% and 10%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="double-value demo item">
         This box has block-start margin = 4% 
         and and block-end margin = 10% of the 
         container height.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Margin Block Property with Writing Mode

The margin-block property can be used in combination with the writing-mode property which determines the direction of the block. In horizontal mode (like horizontal-lr), block-start is top, block-end is bottom. In vertical-mode (like like vertical-rl), block-start is right and block-end is left. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 300px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         margin-block: 60px;
      }

      .horizontal-value {
         border-top: 4px solid red;
         border-bottom: 4px solid red;
         writing-mode: horizontal-lr;

      }

      .vertical-value {
         border-left: 4px solid red;
         border-right: 4px solid red;
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 60px; 
      writing-mode: horizontal-lr;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="horizontal-value demo item">
         This box has both block-start and 
         block-end edges margin = 60px with 
         writing-mode: horizontal-lr.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 60px; 
      writing-mode: vertical-rl;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="vertical-value demo item">
         This box has both block-start margin = 60px 
         with writing-mode: vertical-rl. 
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Supported Browsers

PropertyChromeEdgeFirefoxSafariOpera
margin-block87.087.066.014.173.0
css_reference.htm
Print Page
Previous
Next