CSS - margin-block-end Property

Quiz

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

Syntax

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

Property Values

Value	Description
auto	The browser sets the margin for block-end edge automatically. Default.
length	The margin space of block-end edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of block-end 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 end Property

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

Margin Block End Property with Auto Value

To allow the browser to automatically calculate the margin of block-end 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-bottom: 4px solid red;
      }

      .auto {
         margin-block-end: auto;

      }
   </style>
</head>

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

</html>

Margin Block End Property with Length Value

To set the margin at the block-end 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-bottom: 4px solid red;
      }

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

      }

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

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

</html>

Margin Block End Property with Percentage Value

To set the margin at the block-end 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-bottom: 4px solid red;
      }

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

      }

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

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

</html>

Margin Block End Property with Writing Mode

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

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

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

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

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

<body>
   <h2>
      CSS margin-block-end property
   </h2>
   <h4>
      margin-block-end: 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-end edge margin = 50px 
         and writing-mode: horizontal-lr;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-end: 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-end edge margin = 50px 
         and writing-mode: vertical-rl;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
margin-block-end	87.0	87.0	41.0	12.1	73.0

css_reference.htm

Print Page