Space between children (space-x, space-y) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add horizontal space between child elements using Tailwind CSS.

Tailwind

<div class="flex [1]">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

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

Aspace-x-4

Bspace-y-4

Cgap-4

Dm-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-y-4 which adds vertical space instead of horizontal.

Using gap-4 which works differently and is not the focus here.

The space-x-4 class adds horizontal space between child elements in a flex container.

2fill in blank

medium

Complete the code to add vertical space between child elements using Tailwind CSS.

Tailwind

<div class="flex flex-col [1]">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

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

Am-6

Bgap-6

Cspace-x-6

Dspace-y-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-x-6 which adds horizontal space instead of vertical.

Using gap-6 which is a different spacing method.

The space-y-6 class adds vertical space between child elements stacked in a column.

3fill in blank

hard

Fix the error in the code to correctly add horizontal space between children.

Tailwind

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

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

Aspace-y-2

Bspace-2-y

Cspace-x-2

Dspace-2-x

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-y-2 which adds vertical space.

Using invalid class names like space-2-x.

The correct Tailwind class for horizontal spacing is space-x-2. The other options are invalid or vertical spacing.

4fill in blank

hard

Fill both blanks to add vertical space and make the container a column flex layout.

Tailwind

<div class="[1] [2]">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

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

Aflex-col

Bspace-x-3

Cspace-y-3

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-row which arranges children horizontally.

Using space-x-3 which adds horizontal space.

Use flex-col to stack children vertically and space-y-3 to add vertical space between them.

5fill in blank

hard

Fill all three blanks to create a horizontal flex container with medium horizontal spacing and center alignment.

Tailwind

<div class="flex [1] [2] [3]">
  <button>Yes</button>
  <button>No</button>
  <button>Maybe</button>
</div>

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

Aitems-center

Bspace-x-6

Cjustify-center

Dspace-y-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-y-6 which adds vertical space instead of horizontal.

Forgetting to center items vertically or horizontally.

items-center vertically centers the items, space-x-6 adds horizontal space, and justify-center centers items horizontally.