margin-block | CSS-Tricks

margin-block is a shorthand property in CSS that sets an element’s margin-block-start and margin-block-end values, both of which are logical properties. It creates space around the element in the block direction, which is determined by the element’s writing-mode, direction, and text-orientation.

The property is part of the CSS Logical Properties and Values Level 1 specification which is currently in Editor’s Draft status. That means the definition and information about it can change between now and official recommendation.

.element {
  margin-block: 30px 60px;
  writing-mode: vertical-rl; /* Determines the block start direction */
}

If the writing-mode is set to horizontal-lr, the margin-block property will act just like setting margin-top and margin-bottom. One interesting aspect of this property is is that it is one of the logical properties that doesn’t have a one-to-one map with a non-logical property. There is no older property that sets both (and only) the block direction margins.

But change the element’s writing-mode to something like vertical-lr and the “bottom” edge is rotated in the vertical direction, acting more like the margin-left and margin-right properties.

Syntax

margin-block: <'margin-top'>{1,2}

It’s kinda weird to see the syntax of one property reference the syntax of another CSS property right in the documentation, but that’s really what it is. What it’s basically trying to say is that the property accepts the same values as margin-top (up to two times) which follows this syntax:

margin-top: <length> | <percentage> | auto;

Initial value: 0
Applies to: all elements except internal table elements, ruby base containers, and ruby annotation containers
Inherited: no
Percentages: as for the corresponding physical property
Computed value: same as corresponding margin-* properties
Animation type: by computed value type

Values

If you’re familiar with the margin shorthand property, then margin-block will feel very familiar. The only difference is that it works in two directions instead of four.

/* Length values */
margin-block: 20px 40px;
margin-block: 2rem 4rem;
margin-block: 25% 15%;
margin-block: 20px; /* a single value sets both values */

/* Keyword values */
margin-block: auto;

/* Global values */
margin-block: inherit;
margin-block: initial;
margin-block: unset;