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

One
Two
Three

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
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 2nd January 2024