CSS padding-top Property

What You’ll Learn

The padding-top property sets inner spacing on the top edge of an element. Padding is the space between the content and the border, and top padding gives content breathing room between the top border and the text or media inside the box.

Introduction

The padding-top property in CSS is used to define the space between the content of an element and its top border. It is a crucial property for managing the spacing and layout of elements within a webpage.

The padding-top property allows you to control the vertical spacing within an element, providing a way to create visual separation and layout consistency.

Definition and Usage

Apply padding-top when you need extra room above the content inside an element — for example, below a heading in a card, above a button in a toolbar, or at the top of a content block below the top border.

Like all padding properties, padding-top 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-top property is simple. You can specify the padding using various units, including pixels, ems, percentages, and more.

element {
  padding-top: value;
}

Here, value can be a length (e.g., px, em, rem), a percentage (%), or the keyword auto.

Basic Example

.example {
  padding-top: 20px;
  background-color: lightblue;
}

Syntax Rules

• Apply padding-top to any element that needs extra inner space above its content.
• The value is a length, percentage, or auto.
• The property is not inherited — child elements do not automatically get the parent’s top padding.
• Percentage padding is calculated relative to the width of the containing block.

🎯 Default Value

The default value of the padding-top property is 0. This means that if no value is specified, there will be no padding at the top of the element.

💎 Property Values

Examples Gallery

Start with the reference box example, try different top values, add spacing in stacked layouts, and compare physical top padding with logical block-start padding.

<style>
  .example {
    padding-top: 20px;
    background-color: lightblue;
  }
</style>

<div class="example">
  This div has 20 pixels of padding at the top.
</div>

.compact {
  padding-top: 0.5rem;
}

.comfortable {
  padding-top: 1.5rem;
}

.spacious {
  padding-top: 2.5rem;
}

.card-body {
  padding-inline: 1.25rem;
  padding-top: 1.75rem;
  padding-bottom: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

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

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

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

The padding shorthand sets padding on all four sides at once. Use padding-top when you need spacing on only the top edge.

padding-block-start is the logical equivalent that follows the block axis. Use padding-top for simple physical layouts; prefer padding-block-start in multilingual or vertical writing-mode designs. Remember: margin-top adds space outside the border, not inside it.

/* Bottom only */
.card-body {
  padding-top: 1.25rem;
}

/* All four sides via shorthand */
.section {
  padding: 1rem 2rem;
}

/* Space above the element (outside border) */
.article {
  margin-top: 2rem;
}

♿ Accessibility

• Improve readability — Paragraphs and card content benefit from top padding so text does not crowd the top border.
• Touch targets — Buttons and links inside padded containers are easier to tap when top padding gives them room.
• Do not hide content — Very large top 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