CSS - margin-inline Property

The shorthand CSS property margin-inline combines the description of an element's logical inline start and end margins.

The writing style, directionality, and text orientation of the element are some of the variables that affect the real physical margins.

The inline direction is perpendicular to the block direction. In horizontal-tb writing mode (the default for most languages), the inline direction is horizontal (left to right). In vertical-rl writing mode (commonly used for languages like Japanese), the inline direction is vertical (up and down).

This property behaves as either the margin-top and margin-bottom or margin-right and margin-left properties, depending on the values specified for writing-mode, direction, and text-orientation.
One or two values can be defined for the margin-inline property.
The start and end are both given the same margin when using a single value. When two values are used, the first applies to the start, and the second applies to the end.

Constituent Properties

This property is a shorthand for the following CSS properties:

Possible Values

The following list covers all the possible values of margin-inline 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 - The browser chooses an appropriate margin to apply. This value, for instance, may occasionally be utilized to center an element.

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-inline = <'margin-top'>{1,2}

CSS margin-inline - Length Value

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

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #f57f5b;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline: 25px;
   }
   .marginBox {
      background-color: #69a8f0;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of css margin-inline property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - Percentage Value

The following example demonstrates the usage of margin-inline along with percentage value.

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #de6be8;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline: 5% 6%;
   }
   .marginBox {
      background-color: #c6f086;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of css margin-inline property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - auto Value

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

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #eb2a1c;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline: auto;
   }
   .marginBox {
      background-color: #04bf52;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of css margin-inline property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-inline - writing-mode

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

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 250px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #eb2a1c;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline: 0px;
      writing-mode: vertical-rl;
   }
   .marginBox {
      background-color: #04bf52;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline property.</h1>
<div id="Container">
   <div class="marginBox">box</div>
      <div class="marginDemo">
         Example of css margin-inline property.
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>