CSS - margin-inline-end Property

The logical inline end margin of an element is specified by the CSS property margin-inline-end. This corresponds to a physical margin determined by the text orientation, directionality, and writing style of the element.

Possible Values

The following list covers all the possible values of margin-inline-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-inline-end = <'margin-top'>

CSS margin-inline-end - Length Value

The following example demonstrates the usage of margin-inline-end 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: #d19d9b;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-end: 25px;
   }
   .marginBox {
      background-color: #bd342f;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 30px;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
   <div class="marginBox">Alpha Box</div>
      <div class="marginDemo">
         Example of css margin-inline-end property.
      </div>
   <div class="marginBox">Beta Box</div>
</div>
</body>
</html>

CSS margin-inline-end - Percentage Value

The following example demonstrates the usage of margin-inline-end 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: #9c9a84;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-end: 5%;
   }
   .marginBox {
      background-color: #f7e702;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 30px;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
   <div class="marginBox">Alpha Box</div>
      <div class="marginDemo">
         Example of css margin-inline-end property.
      </div>
   <div class="marginBox">Beta Box</div>
</div>
</body>
</html>

CSS margin-inline-end - auto Value

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

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #cffac3;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
      
   }
   .marginDemo {
      background-color: #29a108;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-end: auto;
      writing-mode: vertical-rl;
   }
   .marginBox {
      background-color: #9ebf95;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 30px;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>Explore the margin-inline-end property.</h1>
<div id="Container">
   <div class="marginBox">Box A</div>
      <div class="marginDemo">
         Example of css margin-inline-end property.
      </div>
   <div class="marginBox">Box B</div>
</div>
</body>
</html>
Advertisements