CSS margin-inline-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

margin-inline-start: 5%;
writing-mode: horizontal-tb;

margin-inline-start: 10px;
writing-mode: vertical-rl;

margin-inline-start: 10%;
writing-mode: horizontal-tb;
direction: rtl;
unicode-bidi:bidi-override;

margin-inline-start: 40px;
writing-mode: vertical-lr;

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

HTML

<div>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}

Result

Editor