The padding property allows you to specify how much space should appear between the content of an element and its border.

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −

      • The padding-bottom specifies the bottom padding of an element.
      • The padding-top specifies the top padding of an element.
      • The padding-left specifies the left padding of an element.
      • The padding-right specifies the right padding of an element.
      • The padding serves as shorthand for the preceding properties.

Now, we will see how to use these properties with examples.

Padding-bottom

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

Padding-top 

The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.

Padding-left 

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

Padding-right

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

Padding

The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.

Example:


Output:

CSS paddings Example

all four paddings will be 10px

top and bottom padding will be 20px, left and right padding will be 30px of the total width of the document.

This is paragraph with a specified bottom padding in percent

This is a paragraph with a specified top padding

This is a paragraph with a specified left padding

This is a paragraph with a specified right padding

Do you Know?
Progamming is what actually means ?

What is software development ?

How we categorized software development in different manner.

C Programming
C Plus Plus
Python
Java Development
Web Designing
Javascript
Mysql
Oracle
We cover all the programming concepts in various programming languages, this tutorials are very help full for bigener as well as Experience developer, for the ease of understanding we categorized programming in different manner likewise.