CSS Padding
How to work with padding in CSS
The padding
CSS property is commonly used in CSS to add space in the inner side of an element.
Remember:
margin
adds space outside an element borderpadding
adds space inside an element border
Specific padding properties
padding
has 4 related properties that alter the padding of a single edge at once:
padding-top
padding-right
padding-bottom
padding-left
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.
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025