CSS margin-block-start Property

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.