Margin utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a margin of 4 units to all sides of the div.

Tailwind

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

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

A2

B8

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding classes like p-4 instead of margin.

Using margin classes with wrong numbers like m-2 which is smaller margin.

The class m-4 adds margin of 1rem (4 units) to all sides of the element.

2fill in blank

medium

Complete the code to add a horizontal margin of 6 units to the paragraph.

Tailwind

<p class="mx-[1]">Hello world!</p>

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

A6

B2

C8

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using my-6 which adds vertical margin instead.

Using smaller margin values like 2 which may be too small.

The class mx-6 adds margin left and right of 1.5rem (6 units).

3fill in blank

hard

Fix the error in the code to add a top margin of 8 units to the section.

Tailwind

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

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

A5

B12

C8

D16

Attempts:

3 left

💡 Hint

Common Mistakes

Using mb-8 which adds bottom margin instead.

Using values like 5 which are not standard Tailwind spacing.

The class mt-8 adds a top margin of 2rem (8 units). Using 8 is correct here.

4fill in blank

hard

Fill both blanks to add vertical margin of 10 units and horizontal margin of 4 units to the div.

Tailwind

<div class="[1] [2]">Box</div>

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

Amy-10

Bmx-6

Cmx-4

Dmt-10

Attempts:

3 left

💡 Hint

Common Mistakes

Using mx-6 instead of mx-4 for horizontal margin.

Using mt-10 alone which only adds top margin.

my-10 adds vertical margin (top and bottom) of 2.5rem (10 units), and mx-4 adds horizontal margin (left and right) of 1rem (4 units).

5fill in blank

hard

Fill all three blanks to add margin top 12 units, margin right 8 units, and margin bottom 4 units to the article.

Tailwind

<article class="[1] [2] [3]">Content</article>

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

Amt-12

Bmr-8

Cmb-4

Dml-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using ml-6 which adds left margin instead of right margin.

Mixing up margin directions like using mb-8 instead of mr-8.

mt-12 adds top margin of 3rem (12 units), mr-8 adds right margin of 2rem (8 units), and mb-4 adds bottom margin of 1rem (4 units).