CSS margin-inline-end Property
Description
The margin-inline-end
CSS property is used to define the margin on the inline end (or trailing) side of an element, which varies depending on the writing mode of the document (horizontal or vertical). In a horizontal writing mode, such as left-to-right text, this property controls the right margin of an element. In a vertical writing mode, it adjusts the margin at the bottom when text flows from top to bottom. This property is particularly useful for creating responsive and adaptable layouts, allowing designers to control the spacing between elements on the appropriate side, based on the writing direction of the content.
- Initial value
- 0
- Applies to
- same as margin
- Inherited
- no
- Computed value
- if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
- Animatable
- a length
- JavaScript syntax
- object.style.marginInlineEnd
Interactive Demo
Syntax
margin-inline-end: <margin-top>
Values
- <margin-top>Specifies margin-block in px, pt, cm, etc. Negative values are allowed.
Example
<div>
<p class="exampleText">Example text</p>
</div>
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
margin-inline-end: 20px;
background-color: #c8c800;
}
Browser Support
The following table will show you the current browser support for the CSS margin-inline-end
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