The margin-block property is a logical shorthand that sets the space on an element’s block-start and block-end sides according to the current writing mode. Instead of targeting physical directions like top or bottom, it follows the block axis of the layout so the same rule adapts automatically when content flows vertically or right-to-left; this behavior depends on how the page’s block axis is defined by properties such as writing-mode. Using the logical axis makes styles more robust for internationalization and for UAs that support vertical text.

In layout terms, margin-block affects how much separation an element creates along the block axis and participates in the normal margin behavior of the formatting context (including interactions like margin collapsing between adjacent block-level elements). Because it targets the logical block sides, it’s the logical counterpart to traditional physical margin rules—useful when you want a single rule to work across multiple writing modes rather than maintaining separate top/bottom declarations for every orientation. It is part of the broader set of logical properties that let you express spacing that adapts to flow direction.

For practical authoring, pair margin-block with the inline-axis logical shorthand when you need full two-axis control; for example, combine it with margin-inline to express both block and inline spacing in a writing-mode–agnostic way. If you’re migrating from older CSS, consider how these logical shorthands relate to the classic box properties (for example, margin) and prefer logical properties when building components that must behave consistently across different locales and orientations.