CSS padding

How to use padding in CSS

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


  • 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;


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

More CSS tutorials: