CSS Padding

The padding property is used to create space around an element's content, inside of any defined borders. Think of it as 'breathing room' for the text or content inside a box.

---

Padding Individual Sides

Like margins, CSS has individual properties for each side of the box:

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

Example Visual: High Padding

p {
    padding-top: 10px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 15px;
}

---

Padding Shorthand

You can write all padding properties in a single line. The shorthand follows the clockwise direction: Top, Right, Bottom, Left.

/* Four values: Top, Right, Bottom, Left */
padding: 25px 50px 75px 100px;

/* Three values: Top, Right/Left, Bottom */
padding: 25px 50px 75px;

/* Two values: Top/Bottom, Right/Left */
padding: 15px 30px;

/* One value: All four sides */
padding: 20px;

---

Padding & Element Width

When you add padding to an element, it is typically added to the total width of that element. If an element has a specified width, adding padding will make it wider than its set width.

/* Content is wider than 300px */
.box1 {
    width: 300px;
    padding: 25px;
    border: 1px solid black;
}

/* Content remains 300px width */
.box2 {
    width: 300px;
    padding: 25px;
    border: 1px solid black;
    box-sizing: border-box; /* Highly Recommended! */
}

---

No Negative Values

Unlike the margin property, the padding property cannot have negative values. Padding must always be 0 or a positive number.

---

Common Use Case: Buttons

Padding is essential for making clickable buttons readable and attractive.

.my-button {
    padding: 12px 24px; /* Makes the button look professional */
    background-color: #2e7d52;
    color: white;
    border: none;
}

---

Common Mistakes to Avoid

---

Try It: With and Without border-box

Two boxes, both set to width: 200px with the same padding and border — only their box-sizing differs:

.content-box {
    width: 200px;
    padding: 20px;
    border: 2px solid #2e7d52;
    box-sizing: content-box; /* default */
}

.border-box {
    width: 200px;
    padding: 20px;
    border: 2px solid #2e7d52;
    box-sizing: border-box;
}

Rendered result (both set to the same 200px width):

---

Frequently Asked Questions