CSS margin-inline Property
Description
The margin-inline
CSS property is used to set the margin space on the inline axis (typically the horizontal axis in left-to-right writing systems like English). It allows for precise control over the space around inline-level elements, such as text or inline-block elements, in a way that respects the document's writing direction. This property is particularly useful in multilingual or bidirectional layouts, ensuring consistent spacing regardless of text direction. It can take values like auto, lengths, or percentages to specify the margin size, and it can be combined with margin-block to control both horizontal and vertical margins comprehensively. Individual properties are: margin-inline-end and margin-inline-start.
- Initial value
- See individual properties
- Applies to
- same as margin
- Inherited
- no
- Computed value
- See individual properties
- Animatable
- See individual properties
- JavaScript syntax
- object.style.marginInline
Interactive Demo
Syntax
margin-inline: <margin-top> {1,2}
Values
- <margin-top> {1,2}Specifies margin-block in px, pt, cm, etc. Negative values are allowed.
Example
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
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;
}
Browser Support
The following table will show you the current browser support for the CSS margin-inline
property.
Desktop | |||||
87 | 87 | 66 | 73 | 14.1 |
Tablets / Mobile | |||||
87 | 66 | 62 | 14.5 | 14 | 87 |
Last updated by CSSPortal on: 2nd January 2024