CSS - margin-inline-end Property

Previous
Quiz
Next

CSS margin-inline-end property sets the margin of the inline-end edge of an element. The writing-mode and direction properties define the inline-direction.

Syntax

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

Property Values

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

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

Margin Inline End Property with Auto Value

To allow the browser to automatically calculate the margin for the inline-end edge 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-end: auto;
      }

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

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

</html>

Margin Inline End Property with Length Values

To set the margin at the inline-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: 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-end: 20px;
      }

      .em-box {
         margin-inline-end: 2em;
      }

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

<body>
   <h2>
      CSS margin-inline-end property
   </h2>
   <h4>
      margin-inline-end: 10px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="px-box props center">
         This box has margin-inline-end: 10px 
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline-end: 2em
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="em-box props center">
         This box has margin-inline: 2em;
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

Margin Inline End Property with Percentage Values

To set the margin at the inline-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: 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-end: 3%;
      }

      .example2 {
         margin-inline-end: 5%;
      }

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

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

</html>

Margin Inline End Property with Direction

The margin-inline-end 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-end is on the right and if the direction is rtl, the inline-end is 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-end: 15px;
      }

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

      .direction-rtl {
         direction: rtl;
      }

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

<body>
   <h2>
      CSS margin-inline-end property
   </h2>
   <h4>
      margin-inline-end: 15px; 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-end: 15px for 
         inline-end edge with rtl direction.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline-end: 15px; 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-end: 15px for 
         inline-end edge with ltr direction.
      </div>
      <div class="demo-box props"> sample box</div>
   </div>
</body>

</html>

Margin Inline End Property with Writing Mode

The margin-inline-end 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-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-end: 30px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-end property
   </h2>
   <h4>
      margin-inline-end: 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-end: 30px for 
            inline-end edge 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-end 87.0 87.0 41.0 12.1 73.0
css_reference.htm
Print Page
Previous
Next
Advertisements