CSS padding-top Property

Definition and Usage

The padding-top property sets the height of the padding area on the top of an element. That space sits between the content and the top border.

It always targets the physical top edge. For spacing that follows writing mode, use padding-block-start. To set all sides at once, use the padding shorthand.

CSS Syntax

Lengths and percentages must be non-negative. The initial value is 0.

Property Values

How to Use padding-top

Add space inside the top border when you specifically need the physical top side.

1. Choose a non-negative length or percentage.
2. Set it on the element that needs top inner space.
3. Remember: padding is inside the border; margin is outside.
4. Use padding-block-start instead when the layout must follow writing mode.

Live Preview

Change padding-top on a bordered box. The gap always appears on the physical top.

CSS Examples

Each snippet focuses on padding-top. Use Try It Yourself for a live editor.

<style>
  div {
    padding-top: 2rem;
    border: 1px solid black;
  }
</style>

<div>Top padding here</div>

<style>
  div {
    padding-top: 10%;
    border: 1px solid black;
  }
</style>

<div>10% top padding</div>

<style>
  .none {
    padding-top: 0;
    border: 1px solid black;
  }

  .pad {
    padding-top: 2rem;
    border: 1px solid black;
  }
</style>

<div class="none">No top padding</div>
<div class="pad">2rem top padding</div>

Key Takeaways