Negative margin usage in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a negative top margin of 4 units using Tailwind CSS.

Tailwind

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

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

Amt-4

B-mb-4

Cmb-4

D-mt-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive margin class like mt-4 instead of negative.

Using bottom margin classes instead of top.

The class -mt-4 applies a negative top margin of 1rem (4 units) in Tailwind CSS.

2fill in blank

medium

Complete the code to apply a negative left margin of 2 units using Tailwind CSS.

Tailwind

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

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

Aml-2

B-ml-2

Cmr-2

D-mr-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using right margin classes instead of left.

Forgetting the negative dash.

The class -ml-2 applies a negative left margin of 0.5rem (2 units) in Tailwind CSS.

3fill in blank

hard

Fix the error in the class to apply a negative bottom margin of 6 units.

Tailwind

<div class="[1]">Footer</div>

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

A-mb-6

Bmb--6

Cmb-6

D-mt-6

Attempts:

3 left

💡 Hint

Common Mistakes

Placing the dash after the direction like mb--6.

Using top margin class instead of bottom.

The correct class is -mb-6. The dash must be before mb, not doubled or misplaced.

4fill in blank

hard

Fill both blanks to apply negative horizontal margin of 3 units and positive vertical margin of 5 units.

Tailwind

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

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

A-mx-3

Bmy-5

C-my-3

Dmx-5

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up horizontal and vertical margin classes.

Forgetting the negative dash for horizontal margin.

-mx-3 applies negative margin on left and right (horizontal) of 0.75rem (3 units). my-5 applies positive margin on top and bottom (vertical) of 1.25rem (5 units).

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps words to their negative top margin classes if length is greater than 4.

Tailwind

margin_classes = { [1]: '[2]' for [3] in words if len([1]) > 4 }

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

Aword

B-mt-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for key and loop variable.

Forgetting to put the margin class as a string.

This comprehension creates a dictionary where each key is a word longer than 4 letters, and the value is the negative top margin class -mt-4.