CSS Padding: Add Space Inside an Element

Padding is the space inside an element, between its content and its border. Think of it as the cushioning inside a box.

index.html

HTML

<style>
  .btn { background: #d94a00; color: white; display: inline-block; margin: 6px; }
  .tight { padding: 0; }
  .roomy { padding: 12px 28px; }
</style>
<span class="btn tight">No padding</span>
<span class="btn roomy">Comfortable padding</span>

The background color extends into the padding, so padding is what makes buttons and cards look like buttons and cards.

One property per side

padding-top, padding-right, padding-bottom, padding-left.

The shorthand

You write	Meaning
`padding: 20px`	All four sides
`padding: 10px 30px`	Top and bottom 10px, left and right 30px
`padding: 5px 10px 20px`	Top 5px, left and right 10px, bottom 20px
`padding: 5px 10px 20px 30px`	Top, right, bottom, left (clockwise)

A trick to remember the order: it goes clockwise from the top, like a clock hand. With two values, the first is vertical and the second is horizontal.

Percentages and negative values

Padding can be a percentage, which is based on the width of the parent element, even for top and bottom. Padding can never be negative.

info

Padding adds to the size

In the default layout mode, a 200px wide box with 20px padding on each side takes 240px of space. CSS Box Sizing shows how to avoid that surprise.

Exercise: a comfortable button

Make a link look like a button: white text on dark blue, 10px top and bottom padding and 24px left and right padding.

Show a possible solution

index.html

HTML

<style>
  a.btn { display: inline-block; background: #1a5276; color: white; padding: 10px 24px; text-decoration: none; }
</style>
<a class="btn" href="#">Subscribe</a>