Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

CSS margin-block-start Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The margin-block-start property controls the margin on the “start” side of the block axis for a box — in other words, the logical margin placed before the box along the block flow. Because it is a logical property, it describes layout in terms of the block axis rather than physical directions like top or bottom, so the effect of setting margin-block-start depends on the document’s writing mode and block flow. It is commonly used to create space between successive block-level boxes in the direction that content is stacked.

When you need to reason about how that logical start-side maps to a physical side, the mapping is determined by the element’s writing environment. For example, in a horizontal-tb writing mode the block start normally corresponds to the physical top edge and therefore behaves like margin-top, while in vertical writing modes it may map to a left or right edge and correspondingly behave like margin-left or margin-right. The choice of writing mode itself is controlled by the writing-mode property, so using logical properties like margin-block-start makes styles more resilient across different writing systems and orientations.

In flow layout, margin-block-start participates in margin-collapsing rules in the same way that physical vertical margins do: adjacent block-start and block-end margins from neighboring elements may collapse under the usual conditions, which affects the actual space rendered between elements. Its behavior also differs when elements are taken out of normal flow — for example, margins on absolutely positioned or floated elements do not collapse with in-flow block margins the way in-flow block-level margins do; these interactions are governed by positioning and formatting context rules such as those associated with the position property.

For practical authoring, logical margins like margin-block-start are useful when you want consistent spacing in multi-directional layouts or when supporting different writing directions without changing many rules. They can be combined with the complementary logical properties (for example, margin-block-end or the shorthand margin-block) or with the overall margin shorthand when you need to express margins in a way that adapts automatically to the document’s writing mode.

Definition

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 class="page">
<div class="example">
<h3>Default (horizontal)</h3>
<p class="first">First paragraph - margin-block-start: 2rem</p>
<p>Second paragraph follows the first paragraph.</p>
</div>

<div class="example container-vertical">
<h3>Vertical (writing-mode: vertical-rl)</h3>
<p class="first">First block - margin-block-start: 1.5rem</p>
<p>Second block follows the first block.</p>
</div>
</div>
/* Page layout */
.page {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: 2rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    background: #f7f8fa;
}

/* Example card */
.example {
    width: 45%;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.example h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.example p {
    background: #f8fafc;
    padding: 0.5rem;
    border: 1px solid #eef2f7;
}

/* Uses the logical property margin-block-start to add space before the block-start edge */
.example .first {
    margin-block-start: 2rem;
    background: #e6f6ff;
}

/* Vertical writing-mode example to show how block-start follows the block axis */
.container-vertical {
    writing-mode: vertical-rl;
    height: 10rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.container-vertical .first {
    margin-block-start: 1.5rem;
    background: #fff7ed;
}

Browser Support

The following information will show you the current browser support for the CSS margin-block-start property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!