Box Model: padding

Category: Web Development & Approved by On February-15-2021 10:39:35

Box Model: Padding Property

Any element padding area to all four side is set by padding property. Padding area is between border and content of an element. Padding creates extra space within an element. In contrast, margin creates extra space around an element.

The padding Its syntax is: padding: <length> <percentage> value;
The padding is shorthand of:


Values description:

  • <length>
    It is used to set the fixed value of paddings.

  • <percentage>
    Paddings will be relative to the width of the containing blocks in percentage

  • auto
    paddings is automatically defines by the browser for specified element and sometimes it is used to align element center.

Let see a syntax for all values of width-color property.
“Global value”
padding: intital;
padding: inherit;
padding: unset;

padding: 50px; apply in all direction
padding: 5em 10em; horizontal | vertical
padding: 20% auto 15%; top | right and left | bottom
padding: 10px 20px 30px 40px; top | right | bottom | left

Code Example:

See the Pen
by Dev-9908 (@dev-9908)
on CodePen.

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter