What is padding property of the box model?

The padding property is used to create space between the content and outline of an element by using CSS padding property; it works for all sides of content an element, you can see the example in below:

For Example - padding:5px

p {

  padding: 5px;

}

Different Types of Padding Properties of Box-Model

The CSS property basically divided into four basics sides like:

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

Padding Top -

The padding-top CSS property works only top of the content of element for example:

p {

  padding-top: 10px;

}

Padding Right -

The padding-right CSS property works only right side of the content of element for example:

p {

  padding-right: 15px;

}

Padding Bottom -

The padding-bottom CSS property works the only bottom of the content of element for example:

p {

  padding-bottom: 10px;

}

Padding Left -

The padding-left CSS property works only left side of the content of element for example:

p {

  padding-left: 15px;

}