margin-inline-end
BaselineWidely 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.
Themargin-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 themargin-top
,margin-right
,margin-bottom
ormargin-left
property depending on the values defined forwriting-mode
,direction
, andtext-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> <div> <div>One</div> <div>Two</div> <div>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
/* <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(--myAnchor 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 tomargin-block-start
,margin-block-end
, andmargin-inline-start
, which define the other margins of the element.
Values
Themargin-inline-end
property takes the same values as themargin-left
property.
Formal definition
Initial value | 0 |
---|---|
Applies to | same asmargin |
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 | alength |
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
<div> <p>Example text</p></div>
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 Level 1 # margin-properties |
Browser compatibility
See also
- CSS Logical Properties and Values
margin-inline-start
- The mapped physical properties:
margin-top
,margin-right
,margin-bottom
, andmargin-left
writing-mode
,direction
,text-orientation