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.
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.
This property is a shorthand for the following CSS properties:
/* <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.
The margin-block
property takes the same values as the margin
property.
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:
|
Animation type | a length |
margin-block =
<'margin-top'>{1,2}
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; }
<div> <p>Example text</p> </div> <div class="verticalExample"> <p>Example text</p> </div>
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 |
margin-top
, margin-right
, margin-bottom
, and margin-left
writing-mode
, direction
, text-orientation
© 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