Facing the CSS: Padding

Photo by Pankaj Patel on Unsplash

Psst! This blog is a continuation of Facing the CSS: Position! Feel free to check it out if you haven’t yet.

Following my journey of re-learning CSS, this time around I’m diving into the padding property. So what is padding? According to W3 Schools —

Padding is used to create space around an element’s content, inside of any defined borders.

There are many ways you can set padding.

You can set the value for each side individually, as follows:

div.padding {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Or, you can use the shorthand version and set the top, right, bottom, and left properties in that order:

div.padding {
    padding: 10px 20px 10px 20px;
}

If your top and bottom, and left and right properties have the same values, you can shorten then furthermore:

div.padding {
    padding: 10px 20px;
}

And of course, if all sides have the same value, you can specify in the same manner:

div.padding {
    padding: 10px;
}

You can specify values by length (fixed values: px, pt, cm, em, etc.), by percentage (%), or by global values (inherit: inherits padding value from its parent element, initial: default value, and unset).

Happy coding!