CSS padding-block-end Property

What You’ll Learn

The padding-block-end property sets inner spacing on the block-end side of an element. In horizontal writing modes, that is usually the bottom padding between content and the border.

Introduction

The padding-block-end property in CSS is part of the Logical Properties and Values specification. It sets the padding on the block-end side of an element, which corresponds to the bottom edge in horizontal writing modes such as English.

This property is useful for creating layouts that adapt to different writing modes, such as vertical text or multilingual pages where the block axis may not align with physical top and bottom edges.

Definition and Usage

Apply padding-block-end when you need inner spacing on only the block-end side and want that spacing to follow the block axis instead of a fixed physical bottom edge. Use it for paragraph spacing, list item gaps, card footers, and any component that needs extra room after the content along the block direction.

Like regular padding, padding-block-end increases the visible size of an element’s background and border box. It never collapses and always stays inside the element’s border.

📝 Syntax

The syntax for the padding-block-end property is straightforward. You can specify the padding value using units like pixels, ems, percentages, and more.

element {

  padding-block-end: value;

}

Here, value can be a length, percentage, or the keyword auto.

Basic Example

p {

  padding-block-end: 20px;

  border: 1px solid #ccc;

}

🎯 Default Value

The default value of the padding-block-end property is 0, which means there is no padding applied on the block-end side unless you set it explicitly.

💎 Property Values

Examples Gallery

Start with the reference paragraph example, try different block-end values, add spacing between stacked items, and compare logical block-end padding with physical bottom padding.

<style>

  p {

    padding-block-end: 20px;

    border: 1px solid #ccc;

  }

</style>



<p>

  This paragraph has 20px of padding at the block-end, which is at the bottom in this writing mode.

</p>

.compact {

  padding-block-end: 0.5rem;

}



.comfortable {

  padding-block-end: 1.5rem;

}



.spacious {

  padding-block-end: 2.5rem;

}

.stack-item {

  padding-block-end: 1rem;

  border-block-end: 1px solid #e2e8f0;

}



.stack-item:last-child {

  padding-block-end: 0;

  border-block-end: none;

}

/* Logical — follows writing mode */

.logical {

  padding-block-end: 24px;

}



/* Physical — fixed to bottom edge */

.physical {

  padding-bottom: 24px;

}

padding-block-end vs padding-block, padding-bottom & block-start

The padding-block shorthand sets both block-start and block-end padding in one declaration. Use padding-block-end when you need spacing on only the block-end side.

padding-bottom always targets the physical bottom edge. Pair padding-block-end with padding-block-start for full per-edge block-axis control, or use padding for physical four-side shorthand.

/* Block-end only */

.card-footer {

  padding-block-end: 1.25rem;

}



/* Both block sides via shorthand */

.section {

  padding-block: 1rem 2rem;

}



/* Physical fallback for older browsers */

.legacy-card {

  padding-bottom: 1.25rem;

}

♿ Accessibility

• Improve readability — Paragraphs and list items benefit from block-end padding so content does not crowd divider lines or borders.
• Respect writing modes — Logical block-end padding keeps spacing correct for users of vertical or mixed writing-mode layouts.
• Do not hide content — Very large block-end padding on small screens can push important content out of view.
• Keep focus visible — Padding adjusts inner spacing; it should not replace visible focus outlines on interactive elements.
• Test zoomed layouts — Users who zoom in rely on comfortable padding to keep text readable.

💡 Best Practices