Concept

padding is a CSS property used to create spacing between the content and the border of a box.

padding has multiple implementations, for example:

• padding: 10px means the spacing around the content is 10px
• padding: 10px 20px means top/bottom spacing is 10px and left/right spacing is 20px
• padding: 10px 20px 30px means top spacing is 10px, left/right spacing is 20px, and bottom spacing is 30px
• padding: 10px 20px 30px 40px means top spacing is 10px, right spacing is 20px, bottom spacing is 30px, and left spacing is 40px

We can also set different spacing for each direction by using:

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

Usage

Example

HTML

<h1>Hello<h1>
<p>Everyone</p>

CSS

h1 {
  padding: 20px;
  background: lightcoral;
}

Result

Experience