The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

/* <length> values */ margin-inline: 10px 20px;  /* An absolute length */ margin-inline: 1em 2em;    /* relative to the text size */ margin-inline: 5% 2%;      /* relative to the nearest block container's width */ margin-inline: 10px;       /* sets both start and end values */  /* Keyword values */ margin-inline: auto;  /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: unset; 

margin-inline

The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

/* <length> values */ margin-inline: 10px 20px;  /* An absolute length */ margin-inline: 1em 2em;    /* relative to the text size */ margin-inline: 5% 2%;      /* relative to the nearest block container's width */ margin-inline: 10px;       /* sets both start and end values */  /* Keyword values */ margin-inline: auto;  /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: unset; 

This property corresponds to the margin-top and margin-bottom, or the margin-right and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

Constituent properties

This property is a shorthand for the following CSS properties:

margin-inline-start margin-inline-end

Syntax

The margin-inline property may be specified using one or two values.

When one value is specified, it applies the same margin to both start and end. When two values are specified, the first margin applies to the start, the second to the end.

Values

The margin-inline property takes the same values as the margin 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	discrete

Formal syntax

<'margin-left'>{1,2}

Examples

Setting inline start and end margins

CSS

div {   background-color: yellow;   width: 120px;   height: auto;   border: 1px solid green; }  p {   margin: 0;   margin-inline: 20px 40px;   background-color: tan; }  .verticalExample {   writing-mode: vertical-rl; } 

HTML

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

Result

Specifications

Specification
CSS Logical Properties and Values Level 1 # propdef-margin-inline

See also

The mapped physical properties: margin-top, margin-right, margin-bottom, and margin-left writing-mode, direction, text-orientation

Last modified: Jan 7, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語 Change language