Padding utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class adds padding of 1rem on all sides?

Select the Tailwind CSS class that applies exactly 1rem padding on all four sides of an element.

A p-4

B p-1

C p-2

D p-6

💡 Hint

Tailwind padding classes use a scale where p-4 equals 1rem by default.

In Tailwind CSS, p-4 applies 1rem padding on all sides. The scale is based on 0.25rem increments, so p-1 is 0.25rem, p-2 is 0.5rem, and p-6 is 1.5rem.

🧠 Conceptual

intermediate

What does the class px-3 do in Tailwind CSS?

Choose the correct description of the effect of the Tailwind class px-3.

A Adds margin of 0.75rem on left and right only

B Adds vertical padding of 0.75rem (top and bottom) only

C Adds padding of 0.75rem on all sides

D Adds horizontal padding of 0.75rem (left and right) only

💡 Hint

The 'x' in px-3 stands for horizontal axis.

The class px-3 applies padding-left and padding-right of 0.75rem (3 * 0.25rem). It does not affect top or bottom padding or margins.

❓ rendering

advanced

What is the visual effect of applying pt-8 pb-4 to a box?

Given a box with these Tailwind classes: pt-8 pb-4, what padding does it have?

Tailwind

<div class="pt-8 pb-4 bg-blue-200">Content</div>

A Top padding 1rem, bottom padding 2rem

B Top padding 2rem, bottom padding 1rem

C Top and bottom padding both 2rem

D Top and bottom padding both 1rem

💡 Hint

Remember Tailwind spacing scale: 8 means 2rem, 4 means 1rem.

pt-8 sets padding-top to 2rem (8 * 0.25rem). pb-4 sets padding-bottom to 1rem (4 * 0.25rem). So top padding is larger than bottom padding.

❓ accessibility

advanced

Why is consistent padding important for accessibility?

Choose the best reason why consistent padding helps accessibility in web design.

A It automatically adds ARIA labels to elements

B It reduces page load time by minimizing CSS size

C It improves keyboard navigation by making clickable areas easier to target

D It changes font sizes to be more readable

💡 Hint

Think about how padding affects clickable or tappable areas.

Consistent padding increases the size of interactive elements, making them easier to click or tap, which helps users who rely on keyboard or touch navigation.

📝 Syntax

expert

What error occurs if you write p-x-4 in Tailwind CSS?

Identify the problem with the class p-x-4 and what happens when you use it.

Tailwind

<div class="p-x-4">Example</div>

A No padding applied because the class is invalid and ignored

B Padding applied only on the x-axis with 1rem

C Syntax error in CSS causing the page to break

D Padding applied on all sides with 1rem

💡 Hint

Tailwind uses specific order for padding classes like p, px, py.

The class p-x-4 is invalid because Tailwind expects px-4 for horizontal padding. Invalid classes are ignored, so no padding is applied.