CSS margin-inline-start Property

Description

The margin-inline-start CSS property is used to specify the margin space on the inline-start side of an element's content box within a block-level element. The "inline-start" side depends on the writing mode; for left-to-right languages like English, it corresponds to the left side, while for right-to-left languages like Arabic, it corresponds to the right side. This property is especially useful for creating responsive layouts or fine-tuning the spacing of elements within a container, allowing precise control over the space at the beginning of the inline direction.

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.marginInlineStart

Interactive Demo

One
Two
Three

Syntax

margin-inline-start: <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-start: 20px;
  background-color: #c8c800;
}

Browser Support

The following table will show you the current browser support for the CSS margin-inline-start 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