Padding

Definition

Utilities for controlling the padding (inner spacing) of an element.

Explain Like I'm New

Stuffing. Padding pushes your OWN content away from your OWN borders. If a button has no padding, the text touches the border. Adding `p-4` gives the text room to breathe inside the button.

Real World Example

Creating a beautiful pill-shaped button using `px-6 py-2` (more padding on the sides than the top).

Common Use Cases

•Buttons
•Cards
•Expanding click targets

Interactive Example

Interview Questions

basic

What is the difference between Margin and Padding?

intermediate

If you apply a background color to an element, does the background color cover the Margin area or the Padding area?

Flash Cards

Question

Margin vs Padding?

Click to reveal answer

Answer

Margin is OUTSIDE the border (pushes other elements away). Padding is INSIDE the border (pushes inner text/content away from the edge).

Question

Background color?

Click to reveal answer

Answer

It covers the Padding area. The Margin area is always transparent.