CSS padding-block-start Property

What You’ll Learn

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

Introduction

The padding-block-start property in CSS is part of the logical properties module, which allows developers to set padding in the block start direction of an element. The block start direction is determined by the writing mode of the document; in most cases, it corresponds to the top padding.

This property is particularly useful for creating layouts that are adaptable to different writing modes and languages.

Definition and Usage

Apply padding-block-start when you need inner spacing on only the block-start side and want that spacing to follow the block axis instead of a fixed physical top edge. Use it for headings, card headers, list item tops, and any component that needs extra room before the content along the block direction.

Like regular padding, padding-block-start 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-start property is as follows:

element {
  padding-block-start: length | percentage | auto | initial | inherit;
}

Here, the value can be a length, percentage, or the keywords auto, initial, or inherit.

Basic Example

p {
  padding-block-start: 20px;
  background-color: lightgrey;
}

🎯 Default Value

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

💎 Property Values

Examples Gallery

Start with the reference paragraph example, try different block-start values, add spacing above stacked items, and compare logical block-start padding with physical top padding.

<style>
  p {
    padding-block-start: 20px;
    background-color: lightgrey;
  }
</style>

<p>
  This paragraph has 20px padding at the block start, which corresponds to the top in most left-to-right writing modes.
</p>

.compact {
  padding-block-start: 0.5rem;
}

.comfortable {
  padding-block-start: 1.5rem;
}

.spacious {
  padding-block-start: 2.5rem;
}

.stack-item {
  padding-block-start: 1rem;
  border-block-start: 1px solid #e2e8f0;
}

.stack-item:first-child {
  padding-block-start: 0;
  border-block-start: none;
}

/* Logical — follows writing mode */
.logical {
  padding-block-start: 24px;
}

/* Physical — fixed to top edge */
.physical {
  padding-top: 24px;
}

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

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

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

/* Block-start only */
.card-header {
  padding-block-start: 1.25rem;
}

/* Both block sides via shorthand */
.section {
  padding-block: 1rem 2rem;
}

/* Physical fallback for older browsers */
.legacy-card {
  padding-top: 1.25rem;
}

♿ Accessibility

• Improve readability — Headings and paragraphs benefit from block-start padding so content does not crowd the top border or preceding elements.
• Respect writing modes — Logical block-start padding keeps spacing correct for users of vertical or mixed writing-mode layouts.
• Do not hide content — Very large block-start 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