pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!

--- a PPN by Garber Painting Akron. With Image Size Reduction included!

margin-inline-end

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

Try it

margin-inline-end: 20px;
writing-mode: horizontal-tb;

margin-inline-end: 20px;
writing-mode: vertical-rl;

margin-inline-end: 20%;
writing-mode: horizontal-tb;
direction: rtl;

<section id="default-example">
  <div id="container">
    <div class="col">One</div>
    <div class="col transition-all" id="example-element">Two</div>
    <div class="col">Three</div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
}

.col {
  width: 33.33%;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: white;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
  unicode-bidi: bidi-override;
}

Syntax

css

/* <length> values */
margin-inline-end: 10px; /* An absolute length */
margin-inline-end: 1em; /* relative to the text size */
margin-inline-end: 5%; /* relative to the nearest block container's width */
margin-inline-end: anchor-size(height);
margin-inline-end: calc(anchor-size(--my-anchor self-inline, 25px) / 5);

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

/* Global values */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;

It relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element.

Values

The margin-inline-end property takes the same values as the margin-left property.

Formal definition

Initial value	`0`
Applies to	same as `margin`
Inherited	no
Percentages	depends on layout model
Computed value	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
Animation type	a length

Formal syntax

margin-inline-end = 
  <'margin-top'>  

<margin-top> = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

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

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Examples

Setting inline end margin

HTML

html

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}

Result

Specifications

Specification
CSS Logical Properties and Values Module Level 1 # margin-properties

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Nov 7, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

pFad - Phonifier reborn

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: