CSS - margin-inline Property

Previous
Quiz
Next

CSS margin-inline property sets the margin in both the inline-start and inline-end edges of an element. It is a shorthand property to define the values of properties: margin-inline-start and margin-inline-end in a single statement. The writing-mode and direction properties define the inline-direction.

Syntax

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

Property Values

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

Examples of CSS Margin Inline Property

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

Margin Inline Property with Auto Value

To allow the browser to automatically calculate the margin for the inline-start and inline-end edges of an element 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;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .auto-box {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline: auto;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: auto
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="auto-box props">
         This box has margin-inline: auto
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

Margin Inline Property with Length Value

To set the margin at the inline-start and inline-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: 200px;
         width: 490px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .px-box {
         margin-inline: 10px;
      }

      .em-box {
         margin-inline: 10px 30px;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 10px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="px-box props center">
         This box has margin-inline: 10px 
         (for both inline-start and inline-end edges)
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline: 10px 30px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="em-box props center">
         This box has margin-inline: 10px 30px 
         (for inline-start edge- 10px, for 
         inline-end edge-30px)
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

Margin Inline Property with Percentage Value

To set the margin at the inline-start and inline-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: 200px;
         width: 490px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .example1 {
         margin-inline: 3%;
      }

      .example2 {
         margin-inline: 2% 3%;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 3%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example1 props center">
         This box has margin-inline: 3% for 
         both the inline-start and inline-end 
         edges of the width of the container.
      </div>
      <div class="demo-box props"> 
      sample box
      </div>
   </div>
   <h4>
      margin-inline: 2% 3%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example2 props center">
         This box has margin-inline: 2% for 
         inline-start edge and 3% for inline-end 
         edge of the width of the container.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

Margin Inline Property with Direction

The margin-inline property can be used in combination with the direction property, which determines the horizontal direction of the text and inline elements. If direction is ltr, the inline-start is on the left and inline-end on the right. If the direction is rtl, the inline-start is on the right and inline-end on the left. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

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

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline: 5px 12px;
      }

      .demo-box {
         background-color: #04bf52;
      }

      .direction-rtl {
         direction: rtl;
      }

      .direction-ltr {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 5px 10px; direction: rtl
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-rtl props center">
         This box has margin-inline: 5px for 
         inline-start edge and 12px for inline-end 
         edge with rtl direction.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline: 5px 10px; direction: ltr
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-ltr props center">
         This box has margin-inline: 5px for 
         inline-start edge and 12px for inline-end 
         edge with ltr direction.
      </div>
      <div class="demo-box props"> sample box</div>
   </div>
</body>

</html>

Margin Inline Property with Writing Mode

The margin-inline property can be used in combination with the writing-mode property which determines the direction and orientation of text flow in a document. For e.g. In vertical-mode (like vertical-rl), inline-start is top and inline-end is bottom. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 50%;
         width: 50%;
      }

      .container > div {
         writing-mode: vertical-rl;
         block-size: 100%;
         box-sizing: border-box;
      }

      .demo-box {
         background-color: #04bf52;
         inline-size: 20%;
      }

      .main-box {
         background-color: lightblue;
         inline-size: 50%;
         border: solid black 1px;
         margin-inline: 10px 30px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 10px 30px; 
      writing-mode: vertical-rl
   </h4>
   <div class="container">
      <div class="demo-box">
         sample box
      </div>
      <div class="main-box">
         <p>
            This box has margin-inline: 10px for 
            inline-start and 30px for inline-end edges 
            with writing-mode: vertical-rl;
         </p>
      </div>
      <div class="demo-box">
         sample box
      </div>
   </div>

</body>

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
margin-inline 87.0 87.0 66.0 14.1 73.0
css_reference.htm
Print Page
Previous
Next
Advertisements