CSS padding-left Property

Definition and Usage

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

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

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

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

Live Preview

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

CSS Examples

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

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

<div>Left padding here</div>

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

<div>10% left padding</div>

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

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

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

Key Takeaways