🔽 padding-bottom CSS Property

🔹 What Is padding-bottom?

The padding-bottom property in CSS adds space between the bottom edge of an element’s content and its border. It’s a part of the box model and only affects the inside of the element.

---

✅ Syntax

selector {
  padding-bottom: 20px;
}

You can use different units:

• px (pixels)
• % (percentage of the element’s width)
• em, rem, etc.

---

📌 Example

<div class="example">Hello, world!</div>

.example {
  background-color: lightblue;
  padding-bottom: 30px;
  border: 2px solid navy;
}

This creates 30px of space between the bottom of the text and the bottom border of the div.

---

🖼️ Image Description: Visualizing padding-bottom

Image idea:
A box with the label “Hello, world!” and a shaded area under the text but inside the border labeled “30px padding-bottom”.
It clearly shows:

• Content at the top
• Padding space beneath the content
• Border at the bottom edge

Would you like me to generate this image for you?

---

🧪 Live Testing Tip

You can experiment with padding-bottom directly in your browser:

1. Right-click on any webpage element.
2. Choose Inspect.
3. In the Styles tab, try adding padding-bottom: 40px;.

You’ll instantly see the bottom space grow inside that element.

---

🔄 Shorthand vs Longhand

While padding-bottom targets the bottom only, you can also use the padding shorthand:

padding: 10px 20px 30px 40px;
/* top right bottom left */

In this case, 30px is the padding-bottom.

---

When to Use padding-bottom

• To add space below text inside a button
• To push content upward within a container
• To separate content from a bottom border or background

---