CSS padding-right Property

Definition and Usage

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

It always targets the physical right edge. For spacing that follows text direction, use padding-inline-end. 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-right

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

1. Choose a non-negative length or percentage.
2. Set it on the element that needs right inner space.
3. Remember: padding is inside the border; margin is outside.
4. Use padding-inline-end instead when the layout must work in RTL too.

Live Preview

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

CSS Examples

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

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

<div>Right padding here</div>

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

<div>10% right padding</div>

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

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

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

Key Takeaways