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

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