W3cubDocs

/CSS

margin-block

The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* <length> values */
margin-block: 10px 20px; /* An absolute length */
margin-block: 1em 2em; /* relative to the text size */
margin-block: 5% 2%; /* relative to the nearest block container's width */
margin-block: 10px; /* sets both start and end values */

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

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

This property corresponds to the margin-top and margin-bottom, or the margin-right and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

The margin-block property may be specified using one or two values.

  • When one value is specified, it applies the same margin to both start and end.
  • When two values are specified, the first margin applies to the start, the second to the end.

Values

The margin-block property takes the same values as the margin property.

Formal definition

Initial value as each of the properties of the shorthand:
Applies to same as margin
Inherited no
Percentages depends on layout model
Computed value as each of the properties of the shorthand:
  • margin-block-start: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • margin-block-end: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation type a length

Formal syntax

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

Examples

Setting block start and end margins

CSS

div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

HTML

<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
margin-block 87 87 66 No 73 14.1 87 87 66 62 14.5 14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block