CSS Padding Property

CSS Padding?

margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.

Padding defines the space between the element's border and its content. CSS padding is specified just like margin — it can be set individually for each side, or all sides at once.

CSS Padding property is used to define the space between the element content and the element 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 properties are there to set an element margin.

  • padding-top: the padding-top property is used to set the padding at top of an element.
  • padding-Bottom: the padding-bottom property is used to set the padding at bottom of an element.
  • padding-left: the padding-left property is used to set the padding at left of an element.
  • padding-right: the padding-right property is used to set the padding at right of an element.

Example 1:


Result :


  Different padding on each side.

Example 2:


Result :

This is a paragraph with no specified padding.
  

This is a paragraph with specified paddings.