CSS Padding

In this tutorial you will learn about the CSS Padding and its application with practical example.

Padding specifies the space between the content of an HTML Element and its border. We can specify padding up to the four sides, CSS padding are specified in a same way as for borders – they can be set individually for each side, or all sides at once. Padding can be specified in 3 ways: length, percentage, or auto.

Table Of Contents−

Padding on all Sides:

Example Code:

Output:

Padding of 20 pixels on all four sides.

Padding for Individual Side

If you don’t want the padding to be applied to all four sides, or if you want each side to have different padding applied, you can use the following properties:

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

Example Code:

Output:

This text has a left padding of 20 pixels.

Padding Property in CSS

Padding property enable us to set all four padding in one declaration. This method uses a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in the one place. This method is fast.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Variation Description
padding:10px; All four sides have a padding of 10 pixels.
padding:10px 20px; Top and bottom have a padding of 10 pixels.
Right and left have a padding of 20 pixels.
padding:10px 20px 30px; Top is 10px
Left and right are 20px
Bottom is 30px
padding:10px 20px 30px 40px; Top is 10px
Right is 20px
Bottom is 30px
Left is 40px

In this tutorial we have learn about the CSS Padding and its application with practical example. I hope you will like this tutorial.