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

One
Two
Three

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
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 2nd January 2024