CSS padding-block Property

What You’ll Learn

The padding-block property is a logical CSS shorthand for inner spacing on the block-start and block-end sides of an element. In normal horizontal English layouts, that usually means the top and bottom padding.

Introduction

The padding-block property in CSS is a shorthand property that sets the padding area on the block start and block end sides of an element. In languages written horizontally, such as English, these correspond to the top and bottom padding.

This property is part of the CSS Logical Properties and Values specification, which provides a way to define properties in a writing-mode-independent manner.

Definition and Usage

Apply padding-block when you need vertical inner spacing that follows the block axis instead of fixed physical top and bottom edges. Use a single value for equal block-start and block-end padding, or two values when each side needs a different amount.

Like regular padding, padding-block 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 property allows you to specify one or two values:

element {

  padding-block: value;

}

• One value — The same padding is applied to both the block start and block end.
• Two values — The first value is applied to the block start, and the second value is applied to the block end.

Basic Example

.example {

  padding-block: 20px 40px;

  background-color: lightblue;

}

🎯 Default Value

The default value of the padding-block property is 0, meaning no padding is applied.

💎 Property Values

Examples Gallery

Try the reference example with two values, a single-value form, section vertical spacing, and a logical vs physical padding comparison.

<style>

  .example {

    padding-block: 20px 40px;

    background-color: lightblue;

  }

</style>



<div class="example">

  This div has 20px padding at the block start and 40px at the block end.

</div>

.note {

  padding-block: 24px;

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 0.5rem;

}

.section {

  padding-block: 1.5rem;

  padding-inline: 1.25rem;

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 0.75rem;

}

/* Logical — follows writing mode */

.logical {

  padding-block: 16px 32px;

}



/* Physical — fixed to top and bottom */

.physical {

  padding-top: 16px;

  padding-bottom: 32px;

}

padding-block vs padding, padding-inline & side properties

The padding shorthand sets all four sides at once using physical edges. Use padding for simple layouts that always use horizontal writing.

padding-inline controls inline-start and inline-end padding (usually left and right in English). When you need per-edge block-axis control, use padding-block-start, padding-block-end, or the longhand pair padding-top and padding-bottom.

/* Logical block-axis spacing */

.card {

  padding-block: 1.25rem;

  padding-inline: 1rem;

}



/* Physical fallback for older browsers */

.legacy-card {

  padding-top: 1.25rem;

  padding-bottom: 1.25rem;

}

♿ Accessibility

• Improve readability — Text blocks benefit from block-axis padding so lines do not touch container edges.
• Size touch targets — Pair block padding with inline padding on buttons and links for comfortable tap areas.
• Respect writing modes — Logical padding keeps spacing correct for users of vertical or RTL layouts.
• Do not hide content — Very large block padding on small screens can push important content out of view.
• Test zoomed layouts — Users who zoom in rely on comfortable padding to keep text readable.

💡 Best Practices