Understanding CSS margin-inline-end for Responsive Design

Learn about the CSS margin-inline-end property, which defines the margin at the logical end of an element's inline direction.

It adapts to writing modes and text orientations, offering lengths, percentages, and keyword values for flexible design.

Introduction

The margin-inline-end property in CSS is a handy tool for managing the spacing at the logical end of an element’s inline direction. It adapts to the writing mode, directionality, and text orientation of the element, making it great for responsive and adaptable web designs. This property has been around since September 2021 and is well-supported across various browsers.

Specification

The margin-inline-end property is part of the CSS Logical Properties and Values Level 1 specification. This specification helps create more flexible layouts, especially useful for different languages and text orientations. It’s an essential tool for developing inclusive and responsive web designs.

Description

The margin-inline-end property defines the logical inline end margin of an element. It adjusts based on the writing mode, directionality, and text orientation, corresponding to margin-top, margin-right, margin-bottom, or margin-left. This makes it useful for creating adaptable designs that accommodate various text directions.

Syntax

The syntax for margin-inline-end is straightforward and supports various values:

/* <length> values */
margin-inline-end: 10px; /* Absolute length */
margin-inline-end: 1em;  /* Relative to text size */
margin-inline-end: 5%;    /* Relative to container width */

/* Keyword values */
margin-inline-end: auto; /* Browser determines margin */

/* Global values */
margin-inline-end: inherit;  /* Inherits from parent */
margin-inline-end: initial;  /* Default value */
margin-inline-end: revert;   /* Reverts to user-agent stylesheet */
margin-inline-end: revert-layer; /* Reverts to previous cascade layer */
margin-inline-end: unset;    /* Resets to inherited or initial */

Values

The margin-inline-end property accepts lengths, percentages, and keywords:

Lengths: Absolute (e.g., px, cm) or relative (e.g., em, rem). Negative values are allowed.
Percentages: Relative to the width of the nearest block container.
Auto: Browser determines the margin size based on context.
Global Values: inherit, initial, revert, revert-layer, unset.

Formal Definition

The margin-inline-end property sets the logical inline end margin of an element:

Initial Value: 0
Applies To: All elements
Inherited: No
Percentages: Depend on the layout model
Computed Value: Absolute length, percentage, or auto
Animation Type: Length

Formal Syntax

margin-inline-end =
  <length-percentage> |
  auto

<length-percentage> =
  <length> |
  <percentage>

<length> =
  <absolute-length> |
  <relative-length>

<absolute-length> =
  px | cm | pt | ...

<relative-length> =
  em | rem | ...

<percentage> =
  <number>%

Examples

Example 1: Setting a Fixed Margin

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS | margin-inline-end Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 120px;
      height: 120px;
    }
    .exampleText {
      writing-mode: vertical-lr;
      margin-inline-end: 20px;
      background-color: #c8c800;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | margin-inline-end Property</b>
    <br><br>
    <div>
      <p class="exampleText">Example text</p>
    </div>
  </center>
</body>
</html>

Result: The text inside .exampleText will have a 20px margin at the end of its inline direction.

Example 2: Using the `auto` Keyword

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS | margin-inline-end Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 120px;
      height: 120px;
    }
    .exampleText {
      writing-mode: vertical-lr;
      margin-inline-end: auto;
      background-color: #c8c800;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | margin-inline-end Property</b>
    <br><br>
    <div>
      <p class="exampleText">Example text</p>
    </div>
  </center>
</body>
</html>