Home » Learn » CSS Tutorial » CSS Padding

CSS Padding

Padding is the space inside an element, between its content and its border. The background colour also fills the padding area.

.box {
  padding: 20px;
  background: #ffe0b2;
}
Output in the browser
Content with 20px padding on every side.

Padding for each side

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Shorthand

ValuesMeaning
padding: 10px;All four sides
padding: 10px 20px;Top and bottom 10px, left and right 20px
padding: 10px 20px 30px;Top 10px, left and right 20px, bottom 30px
padding: 10px 20px 30px 40px;Top, right, bottom, left (clockwise)
button { padding: 10px 24px; }
Output in the browser

Note: Padding cannot be negative, and it can be a percentage of the parent width. If you only want to push the box away from other boxes, use margin.

Summary

  • Padding is the inner space of an element.
  • The shorthand goes clockwise: top, right, bottom, left.
  • Next: CSS Margins.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.