Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

CSS margin-block-end Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The margin-block-end property controls the amount of space placed on the end side of an element along the block axis — in other words, the space that appears after the element in the flow of content when measured in block direction. Because it is a logical property, its physical interpretation depends on writing direction: in the common horizontal-tb writing mode it corresponds to the visual bottom side, but in vertical or right-to-left writing modes the same property maps to the appropriate end edge of the block axis. Use of logical properties like this makes layouts more adaptable across different scripts and writing directions; for the complementary start side see margin-block-start.

In the box model, margin-block-end is outside an element’s border and padding and therefore affects the spacing between sibling boxes rather than an element’s internal content area. It participates in the usual margin behaviors for block-level elements in normal flow, including margin collapsing with adjacent block margins under the standard rules. It is not inherited by children, so each element’s block-end margin is controlled independently unless you explicitly propagate values.

How margin-block-end behaves can change with layout context. It has no collapsing effect for elements taken out of normal block flow (for example absolutely positioned elements or many flex items), and interactions with layout models such as flexbox and grid differ from classic block formatting: margins still create space but do not collapse in the same way. The block axis itself is determined by writing and text direction, so this property’s mapping to a physical side is directly influenced by writing-mode. For shorthand convenience you can set block-side margins together using the logical shorthand margin (or other logical shorthands), which will also affect the block-end value when used.

Definition

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

<body>
<main class="container">
<h1>margin-block-end demo</h1>
<p class="box">First box (margin-block-end: 2rem)</p>
<p class="box large-gap">Second box (margin-block-end: 4rem)</p>
<p class="box no-gap">Third box (margin-block-end: 0)</p>

<div class="vertical">
<p class="box">Vertical writing-mode (margin-block-end follows block direction)</p>
<p class="box">Another vertical paragraph</p>
</div>
</main>
</body>
/* Basic page styles */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 2rem;
  background: #f7f9fc;
  color: #0f172a;
  line-height: 1.45;
}

/* Centered container */
.container {
  max-width: 720px;
  margin: 0 auto;
}

/* Reusable box appearance */
.box {
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e6eef8;
  border-radius: 8px;
  /* Logical margin at the end of the block axis */
  margin-block-end: 2rem;
}

/* Larger block-end margin */
.box.large-gap {
  margin-block-end: 4rem;
}

/* No gap after this box */
.box.no-gap {
  margin-block-end: 0;
}

/* Demonstrate effect when writing mode is vertical */
.vertical {
  writing-mode: vertical-rl;
  border: 1px dashed #cbd5e1;
  padding: 1rem;
  margin-top: 2rem;
  background: linear-gradient(90deg, #ffffff, #f3f8ff);
}

.vertical .box {
  margin-block-end: 1rem;
}

Browser Support

The following information will show you the current browser support for the CSS margin-block-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!