Box Model: padding

Category: Web Development & Approved by devanshchakravarti83@gmail.com 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:
padding-top
padding-right
padding-bottom
padding-left



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.
Example:
“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
QWGGyKj 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

Coding Challanges
C Programming Language
Daily Tech News/Updates
Web Development
Free Courses (Udemy)
Ethical Hacking and Cyber Security
Education

---

---

---

---

---