Padding utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add padding of 4 units on all sides of the div.

Tailwind

<div class="p-[1]">Content</div>

Drag options to blanks, or click blank then click option'

A4

B2

C6

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using p-2 or p-6 which changes the padding size.

Forgetting to add the p- prefix.

The class p-4 adds padding of 1rem (4 units) on all sides of the element.

2fill in blank

medium

Complete the code to add horizontal padding of 6 units to the section.

Tailwind

<section class="px-[1]">Section content</section>

Drag options to blanks, or click blank then click option'

A4

B2

C6

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using py-6 which adds vertical padding instead.

Using a smaller or larger padding number.

The class px-6 adds padding-left and padding-right of 1.5rem (6 units).

3fill in blank

hard

Complete the code to add top padding of 8 units to the header.

Tailwind

<header class="pt-[1]">Header content</header>

Drag options to blanks, or click blank then click option'

A4

B12

C10

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using pt-10 or pt-12 which provide larger padding than 8 units.

Using pt-4 which provides smaller padding.

The class pt-8 adds padding-top of 2rem (8 units). The value 8 is valid and correct.

4fill in blank

hard

Fill both blanks to add vertical padding of 2 units and horizontal padding of 3 units to the article.

Tailwind

<article class="[1]-2 [2]-3">Article content</article>

Drag options to blanks, or click blank then click option'

Apy

Bpx

Cpt

Dpl

Attempts:

3 left

💡 Hint

Common Mistakes

Using pt-2 and pl-3 which add padding only to top and left.

Mixing up vertical and horizontal prefixes.

py-2 adds padding-top and padding-bottom of 0.5rem (2 units). px-3 adds padding-left and padding-right of 0.75rem (3 units).

5fill in blank

hard

Fill all three blanks to add padding-top 5 units, padding-right 4 units, and padding-bottom 6 units to the footer.

Tailwind

<footer class="[1]-5 [2]-4 [3]-6">Footer content</footer>

Drag options to blanks, or click blank then click option'

Apt

Bpr

Cpb

Dpl

Attempts:

3 left

💡 Hint

Common Mistakes

Using pl instead of pr for right padding.

Mixing up padding values and sides.

pt-5 adds padding-top 1.25rem, pr-4 adds padding-right 1rem, and pb-6 adds padding-bottom 1.5rem.