CSS margin-block-end Property

Description

The margin-block-end CSS property is used to define the spacing or margin at the end of a block-level element within its containing block. This property is particularly useful in the context of vertical layout, such as in the writing modes where text flows vertically. By setting margin-block-end, you can control the space between the bottom edge of an element and its containing block, effectively adding spacing below the element. It allows for precise control over the layout and presentation of content in a vertical direction, ensuring proper spacing and alignment in different design scenarios.

Initial value
0
Applies to
same as margin
Inherited
no
Computed value
if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animatable
a length
JavaScript syntax
object.style.marginBlockEnd

Interactive Demo

One
Two
Three

Syntax

margin-block-end: <margin-top> 

Values

  • <margin-top>Specifies margin-block in px, pt, cm, etc. Negative values are allowed.

Example

<div>
<p class="exampleText">Example text</p>
</div>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}

Browser Support

The following table will show you the current browser support for the CSS margin-block-end 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