CSS margin-block-start Property

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

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

<div>
<p class="exampleText">Example text</p>
</div>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Browser Support

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