CSS margin-block Property
Description
The margin-block
CSS property is a shorthand property used to define the margins for an element in its block dimension, which is typically the vertical direction. It allows you to set the top and bottom margins simultaneously, simplifying the styling of spacing between elements in a block layout. This property is especially useful in situations where you want to control the spacing between elements vertically, such as paragraphs, headings, or divs, without affecting their horizontal layout. It complements the margin-inline property, which controls margins in the inline direction (usually horizontal). Together, they provide comprehensive control over an element's margins in both directions, making it easier to create well-structured and visually appealing layouts. Individual properties are: margin-block-end and margin-block-start.
- Initial value
- See individual properties
- Applies to
- same as margin
- Inherited
- no
- Computed value
- See individual properties
- Animatable
- See individual properties
- JavaScript syntax
- object.style.marginBlock
Interactive Demo
Syntax
margin-block: <margin-top> {1,2}
Values
- <margin-top> {1,2}Specifies margin-block in px, pt, cm, etc. Negative values are allowed.
Example
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
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;
}
Browser Support
The following table will show you the current browser support for the CSS margin-block
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
87 | 87 | 66 | 73 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
87 | 66 | 62 | 14.5 | 14 | 87 |
Last updated by CSSPortal on: 2nd January 2024