CSS padding

How to use padding in CSS

ThispaddingCSS properties are usually used in CSS to add space inside elements.

remember:

marginAdd space outside the element boundary
paddingAdd space inside the element border

Specific fill properties

paddingWith 4 related attributes, the padding of a single edge can be changed at the same time:

padding-top
padding-right
padding-bottom
padding-left

The usage of these is very simple and should not be confused, for example:

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

use`padding`shorthand

paddingIt is an abbreviation for specifying multiple fill values at the same time, and its behavior will vary depending on the number of values entered.

1 value

Use a single value to apply it toAllFiller: top, right, bottom, left.

padding: 20px;

2 values

Use 2 values to apply the first oneBottom and top,the secondabout.

padding: 20px 10px;

3 values

Use 3 values to apply the first oneoptimal,the secondabout,The thirdbottom.

padding: 20px 10px 30px;

4 values

Use 4 values to apply the first oneoptimal,the secondcorrect,The thirdbottom,the fourthLeft.

padding: 20px 10px 5px 0px;

So, the order isTop right-bottom left.

Accepted value

paddingAccept the value expressed in any length unit, the most common are px, em, rem, butThere are many others.

Download mine for freeCSS Manual