CSS margin-block-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-block-start CSS property defines the margin space at the beginning of an element in its block-axis direction, which is typically the top margin for elements in a horizontal writing mode (like English text). This property allows developers to control the spacing between elements in a layout, ensuring proper alignment and spacing within a block formatting context. It's particularly useful in creating responsive and well-structured designs, as it allows for precise control over the spacing at the start of block-level elements, such as paragraphs or headings, without affecting their margins in other directions.

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

Interactive Demo

margin-block-start: 20px;
writing-mode: horizontal-tb;

margin-block-start: 40px;
writing-mode: vertical-rl;

margin-block-start: 15%;
writing-mode: horizontal-tb;

margin-block-start: auto;
writing-mode: vertical-lr;

One

Two

Three

Syntax

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

Result

Editor