WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Padding



CSS Padding

The CSS cushioning properties predominantly the blank area between the component content and the component border.

The cushioning clears a territory around the substance inside the outskirt of an element.

In CSS you have adapt full about padding.There are CSS properties for setting the cushioning for cushioning for upper right base and left.


Padding - Individual Sides

CSS has properties for determining the cushioning for each side of an element:

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

All the cushioning properties can have the accompanying values:

  • length - determines a cushioning in px, pt, cm, etc.
  • % - determines a cushioning in % of the width of the containing element
  • inherit - determines that the cushioning ought to be acquired from the parent element

The following precedent sets diverse cushioning for each of the four sides of a <p> element: 

Example

p {
    cushioning top: 50px;
    cushioning right: 30px;
    cushioning base: 50px;
    cushioning left: 80px;
}
Try it yourself »

Padding - Shorthand Property

To abbreviate the code, it is conceivable to indicate all the cushioning properties in one property.

The padding property is a shorthand property for the accompanying person cushioning properties:

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

Example

p {
    cushioning: 50px 30px 50px 80px;
}
Try it yourself »

So, here is the means by which it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top cushioning is 25px
    • right cushioning is 50px
    • bottom cushioning is 75px
    • left cushioning is 100px

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top cushioning is 25px
    • right and left paddings are 50px
    • bottom cushioning is 75px

If the padding property has two values:

  • padding: 25px 50px;
    • top and base paddings are 25px
    • right and left paddings are 50px

If the padding property has one value:

  • padding: 25px;
    • all four paddings are 25px


All CSS Padding Properties

Property Description
padding A shorthand property for setting all the cushioning properties in one declaration
padding-bottom Sets the base cushioning of an element
padding-left Sets the left cushioning of an element
padding-right Sets the correct cushioning of an element
padding-top Sets the best cushioning of an element