CSS margin-block-end Property

The margin-block-end property controls the amount of space placed on the end side of an element along the block axis — in other words, the space that appears after the element in the flow of content when measured in block direction. Because it is a logical property, its physical interpretation depends on writing direction: in the common horizontal-tb writing mode it corresponds to the visual bottom side, but in vertical or right-to-left writing modes the same property maps to the appropriate end edge of the block axis. Use of logical properties like this makes layouts more adaptable across different scripts and writing directions; for the complementary start side see margin-block-start.

In the box model, margin-block-end is outside an element’s border and padding and therefore affects the spacing between sibling boxes rather than an element’s internal content area. It participates in the usual margin behaviors for block-level elements in normal flow, including margin collapsing with adjacent block margins under the standard rules. It is not inherited by children, so each element’s block-end margin is controlled independently unless you explicitly propagate values.

How margin-block-end behaves can change with layout context. It has no collapsing effect for elements taken out of normal block flow (for example absolutely positioned elements or many flex items), and interactions with layout models such as flexbox and grid differ from classic block formatting: margins still create space but do not collapse in the same way. The block axis itself is determined by writing and text direction, so this property’s mapping to a physical side is directly influenced by writing-mode. For shorthand convenience you can set block-side margins together using the logical shorthand margin (or other logical shorthands), which will also affect the block-end value when used.