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.
margin-inline
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* <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: revert-layer; 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
.
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
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
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
margin-inline |
87
69
|
87
79
|
66
|
No
|
73
56
|
14.1
|
87
|
87
69
|
66
|
48
|
14.5
|
14.0
|
See also
- The mapped physical properties:
margin-top
,margin-right
,margin-bottom
, andmargin-left
-
writing-mode
,direction
,text-orientation
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline