Skip to content

CSS Padding

How to work with padding in CSS

THE AHA STACK MASTERCLASS

Now open with 50% off launch discount!

The padding CSS property is commonly used in CSS to add space in the inner side of an element.

Remember:

Specific padding properties

padding has 4 related properties that alter the padding of a single edge at once:

The usage of those is very simple and cannot be confused, for example:

padding-left: 30px;
padding-right: 3em;

Using the padding shorthand

padding is a shorthand to specify multiple padding values at the same time, and depending on the number of values entered, it behaves differently.

1 value

Using a single value applies that to all the paddings: top, right, bottom, left.

padding: 20px;

2 values

Using 2 values applies the first to bottom & top, and the second to left & right.

padding: 20px 10px;

3 values

Using 3 values applies the first to top, the second to left & right, the third to bottom.

padding: 20px 10px 30px;

4 values

Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left.

padding: 20px 10px 5px 0px;

So, the order is top-right-bottom-left.

Values accepted

padding accepts values expressed in any kind of length unit, the most common ones are px, em, rem, but many others exist.


→ Get my CSS Handbook

I wrote 20 books to help you become a better developer:

  • Astro Handbook
  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • CSS Handbook
  • Node.js Handbook
...download them all now!

Related posts that talk about css: