CSS - margin-inline-start Property

Quiz

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

Syntax

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

Property Values

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

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

Margin Inline Start Property with Auto Value

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

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

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

</html>

Margin Inline Start Property with Length Values

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

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

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

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

</html>

Margin Inline Start Property with Percentage Values

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

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

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

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

</html>

Margin Inline Start Property with Direction

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

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

      .direction-rtl {
         direction: rtl;
      }

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

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

</html>

Margin Inline start Property with Writing Mode

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

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: 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-start: 30px for 
            inline-start edge with writing-mode: vertical-rl;
         </p>
      </div>
      <div class="demo-box">
         sample box
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
margin-inline-start	69.0	79.0	68.0	14.1	56.0

css_reference.htm

Print Page