CSS - margin-block-start Property

Quiz

CSS margin-block-start property is used to set the margin space at the start of an element in the block direction. The writing-mode determines the block direction.

Syntax

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

Property Values

Value	Description
auto	The browser sets the margin for block-start edge automatically. Default.
length	The margin space of block-start edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of block-start edge is set using percentage values (e.g. 10%) relative to the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Margin Block Start Property

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

Margin Block Start Property with Auto Value

To allow the browser to automatically calculate the margin of block-start edge 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: 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;
      }

      .auto {
         margin-block-start: auto;

      }
   </style>
</head>

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

</html>

Margin Block Start Property with Length Value

To set the margin at the block-start edge of an element, we can specify the margin size using length units (e.g. px, em, rem etc.). 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;
      }

      .single-value-px {
         margin-block-start: 30px;

      }

      .single-value-em {
         margin-block-start: 4em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 30px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value-px demo item">
         This box has block-start edge margin = 30px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 4em
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value-em demo item">
         This box has block-start edge margin = 4em
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Margin Block Start Property with Percentage Value

To set the margin at the block-start edge of an element, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). 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;
      }

      .example1 {
         margin-block-start: 7%;

      }

      .example2 {
         margin-block-start: 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 7%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="example1 demo item">
         This box has block-start edge margin = 7% 
         of the width of containing element.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 15%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="example2 demo item">
         This box has block-start edge margin = 15% 
         of the width of containing element.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Margin Block Start Property with Writing Mode

The margin-block-start property can be used in combination with the writing-mode property which determines the direction of the block-start. In horizontal mode (like horizontal-lr), block-start is top. In vertical-mode (like like vertical-rl), block-start is right. These are 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-horizontal {
         border-top: 4px solid red;
      }

      .item-vertical {
         border-right: 4px solid red;
      }

      .margin {
         background-color: lightblue;
         margin-block-start: 50px;
      }

      .horizontal {
         writing-mode: horizontal-lr;
      }

      .vertical {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 50px; writing-mode: horizontal-lr;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="horizontal demo item-horizontal margin">
         This box has block-start edge margin = 50px 
         and writing-mode: horizontal-lr;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 50px; writing-mode: vertical-rl;
   </h4>
   <div class="container vertical">
      <div class="demo">
         top box
      </div>
      <div class="vertical demo item item-vertical margin">
         This box has block-start edge margin = 50px 
         and writing-mode: vertical-rl;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
margin-block-start	87.0	87.0	41.0	12.1	73.0

css_reference.htm

Print Page