CSS margin-block-end Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

margin-block-end: 20px;
writing-mode: horizontal-tb;

margin-block-end: 40px;
writing-mode: vertical-rl;

margin-block-end: 15%;
writing-mode: horizontal-tb;

margin-block-end: auto;
writing-mode: vertical-lr;

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

HTML

<div>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Result

Editor