CSS Portal

CSS padding-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 padding-block-end property sets the padding on the "end" side of the block axis for an element, using logical (writing-mode-aware) direction rather than a fixed physical side. That means what counts as the block end depends on the element's block flow: in a horizontal-tb writing mode the block axis runs top-to-bottom so the block end corresponds to the bottom edge, while in vertical writing modes the block axis runs in a different direction and the end side can correspond to a physical left or right edge. See writing-mode and direction for how those axes are determined.

In layout terms, padding-block-end adds inner space between the element's border (or edge if border is absent) and its content on that end side. It participates in painting (backgrounds extend underneath padding) and in hit-testing and interactive areas, and it occupies layout space unless the used box-sizing model alters sizing behavior. For example, the element's total outer size in a normal flow is affected by its padding unless modified by box-sizing. Percentages used with this logical padding resolve the same way as other padding percentages — they follow the CSS rules for percentage resolution (not the block-axis length) — so they can behave counterintuitively if you expect them to reference the block-size.

Practical use favors logical properties like padding-block-end when creating stylesheets that must adapt to different writing modes, languages, or layout reflows: you can change the overall flow direction and let the logical padding map to the correct physical side automatically. It is commonly set alongside its counterpart padding-block (shorthand for both block-start and block-end) or the universal shorthand padding. Logical padding works with transitions and animations just like physical padding, and because it does not inherit by default, explicit values are typically applied to the element that requires the spacing.

Definition

Initial value
0
Applies to
all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited
no
Computed value
as <length>
Animatable
a length
JavaScript syntax
object.style.paddingBlockEnd

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-block-end: <padding-top> 

Values

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

Example

<div class="wrapper">
<h2>padding-block-end demo</h2>

<div class="card horizontal">
<div class="content">
<p>Main content</p>
</div>
<div class="label">padding-block-end: 40px</div>
</div>

<div class="card vertical">
<div class="content">
<p>Vertical writing mode</p>
</div>
<div class="label">padding-block-end: 40px</div>
</div>
</div>
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  background: #f6f8fa;
  color: #111;
}

.wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

h2 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.card {
  width: 280px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding-inline: 16px;
  padding-block-start: 12px;
  padding-block-end: 40px; /* padding-block-end demonstration */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card .content {
  background: #eef3ff;
  padding: 8px;
  border-radius: 6px;
}

.card .label {
  font-size: 13px;
  color: #334;
}

.vertical {
  width: 140px;
  height: 220px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Browser Support

The following information will show you the current browser support for the CSS padding-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!