CSS - margin-block-end Property

The logical block end margin of an element's is specified by the margin-block-end CSS property, which is translated to a physical margin depending on the writing mode, directionality, and text orientation of the element.

Possible Values

The following list covers all the possible values of margin-block-end property which are similar to margin-left property.

  • <length> - The fixed value of the margin's size.

  • <percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.

  • auto - A percentage of the available horizontal space is allocated to the left margin, with the layout option selected playing a crucial part.

    The spacing between the margin-left and margin-right values is equal when both of them are set to auto.

Applies to

All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.

Syntax

margin-block-end = <'margin-top'>

CSS margin-block-end - Length Value

The following example demonstrates the usage of margin-block-end with length value.

<html>
<head>
<style>
   body {
      background-color: #F1ECEC;
   }
   #customDIV {
      height: 400px;
      background-color: #FFF7B0;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #8B78B6;
      border: 2px dashed #4682B4;
      margin-block-end: 25px;
   }
   .marginBox {
      width: 250px;
      background-color: #F3994D;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-block-end property</h1>
<div id="customDIV">
<p>Orange div elements emphasize margins around the purple box.</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of margin-block-end property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-end - Percentage Value

The following example demonstrates the usage of margin-block-end with percentage value.

<html>
<head>
<style>
   body {
      background-color: #dfe4ed;
   }
   #customDIV {
      height: 400px;
      background-color: #edecb7;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #65f252;
      border: 2px dashed #4682B4;
      margin-block-end: 20%;
   }
   .marginBox {
      width: 250px;
      background-color: #f5d902;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-block-end property</h1>
<div id="customDIV">
<p>Yellow div elements emphasize margins around the green box.</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of margin-block-end property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-end - auto Value

The following example demonstrates the usage of margin-block-end with auto value.

<html>
<head>
<style>
   body {
      background-color: #F2EFEF;
   }
   #customDIV {
      height: 400px;
      background-color: #FFEEA8;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #6495ED;
      border: 4px dashed #4682B4;
      margin-block-end: auto;
   }
   .marginBox {
      width: 250px;
      background-color: #FFA07A;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-block-end property</h1>
<div id="customDIV">
<p>Orange div elements emphasize margins around the blue box.</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of margin-block-end property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-end - writing-mode

The following example demonstrates the usage of margin-block-end with length value and writing-mode: vertical-rl.

<html>
<head>
<style>
   body {
      background-color: #E3EAE9;
   }
   #customDIV {
      height: 500px;
      background-color: #FFEACB;
      padding: 20px;
   }
   .marginDemo {
      width: 50px;
      background-color: #87CEEB;
      border: 4px dashed #2E517F;
      margin-block-end: 20px;
      writing-mode: vertical-rl;
   }
   .marginBox {
      width: 150px;
      background-color: #FF9A8B;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-block-end property</h1>
<div id="customDIV">
<p>Orange div elements emphasize margins around the blue box.</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of margin-block-end property
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>
Advertisements