CSS padding-bottom Property

What You’ll Learn

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

Introduction

The padding-bottom property in CSS is used to set the padding area on the bottom of an element. Padding is the space between the content of the element and its border.

The padding-bottom 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-bottom when you need extra room below the content inside an element — for example, under a paragraph in a card, below a button in a toolbar, or at the foot of a content block before the bottom border.

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

element {
  padding-bottom: value;
}

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

Basic Example

.box {
  border: 1px solid #000;
  padding-bottom: 20px;
  background-color: lightgray;
}

Syntax Rules

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

🎯 Default Value

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

💎 Property Values

Examples Gallery

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

<style>
  .box {
    border: 1px solid #000;
    padding-bottom: 20px;
    background-color: lightgray;
  }
</style>

<div class="box">
  This box has a padding-bottom of 20px.
</div>

.compact {
  padding-bottom: 0.5rem;
}

.comfortable {
  padding-bottom: 1.5rem;
}

.spacious {
  padding-bottom: 2.5rem;
}

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

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

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

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

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

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

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

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

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

♿ Accessibility

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