Space between children (space-x, space-y) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding space-x in Tailwind CSS

What visual effect does the class space-x-4 have on a container with multiple inline children?

A Adds horizontal space of 1rem between each child element.

B Adds vertical space of 1rem between each child element.

C Adds horizontal padding of 1rem inside each child element.

D Adds margin of 1rem around the entire container.

💡 Hint

Think about the direction of the space when using space-x.

The space-x-4 class adds horizontal space (left and right) of 1rem (4 * 0.25rem) between each child element inside a flex container arranged in a row.

📝 Syntax

intermediate

Correct usage of space-y for vertical spacing

Which Tailwind CSS class correctly adds vertical space of 0.5rem between stacked children?

A space-vertical-2

B space-x-2

C space-y-0.5

D space-y-2

💡 Hint

Remember the naming pattern for vertical spacing in Tailwind.

space-y-2 adds vertical space of 0.5rem (2 * 0.25rem) between children stacked vertically.

space-x-2 adds horizontal space, space-y-0.5 is invalid, and space-vertical-2 is not a Tailwind class.

❓ rendering

advanced

Visual result of combining space-x and space-y

Given a flex container with classes flex flex-wrap space-x-3 space-y-6, what spacing will the children have?

Tailwind

<div class="flex flex-wrap space-x-3 space-y-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

A Children have 0.75rem horizontal and 1.5rem vertical space between them, wrapping to new lines as needed.

B Children have 3rem horizontal and 6rem vertical space between them, no wrapping.

C Children have 0.75rem vertical and 1.5rem horizontal space, wrapping disabled.

D Children have no space between them because <code>space-x</code> and <code>space-y</code> cannot be combined.

💡 Hint

Check the spacing scale: 3 means 0.75rem, 6 means 1.5rem.

The space-x-3 adds 0.75rem horizontal space, space-y-6 adds 1.5rem vertical space between children. The flex-wrap allows children to wrap to new lines, so vertical spacing applies between rows.

❓ selector

advanced

How does Tailwind apply space-x spacing in CSS?

Which CSS selector does Tailwind use internally to apply horizontal spacing with space-x-4?

A Last child selector: *:last-child { margin-left: 1rem; }

B All children selector: * { margin-left: 1rem; }

C Direct child selector with adjacent sibling combinator: > * + * { margin-left: 1rem; }

D First child selector: *:first-child { margin-left: 1rem; }

💡 Hint

Think about how spacing is added only between siblings, not before the first child.

Tailwind uses the selector > * + * to apply margin-left only to siblings after the first child, ensuring spacing appears between children but not before the first.

❓ accessibility

expert

Accessibility considerations when using space-x and space-y

When using space-x or space-y for spacing between interactive elements, what accessibility best practice should you follow?

A Use <code>aria-hidden</code> on all children to avoid confusion.

B Ensure the spacing does not reduce the clickable area or cause elements to be too close for keyboard navigation.

C Remove all spacing on focus states to avoid layout shifts.

D Add tabindex="-1" to all children to prevent keyboard focus.

💡 Hint

Think about how spacing affects users who navigate with keyboard or touch.

Proper spacing ensures interactive elements are easy to target and navigate. Too little space can cause difficulty for keyboard users or those with motor impairments. Avoid hiding elements or removing focusability.

Practice

1. What does the Tailwind class space-x-4 do when applied to a container with multiple child elements?

easy

A. Adds padding of 1rem inside each child element

B. Adds horizontal space of 1rem between each child element

C. Adds vertical space of 1rem between each child element

D. Adds margin of 1rem around the container

Solution

1. Step 1: Understand the space-x class

   The space-x class adds horizontal space between child elements inside a container.

2. Step 2: Interpret the number 4

   In Tailwind, 4 corresponds to 1rem (16px) spacing.

3. Final Answer:

   Adds horizontal space of 1rem between each child element -> Option B

4. Quick Check:

   space-x-4 = horizontal 1rem space [OK]

Hint: Remember: space-x adds horizontal gaps, space-y adds vertical [OK]

Common Mistakes:

• Confusing space-x with space-y
• Thinking it adds margin to container instead of between children
• Assuming it adds padding inside children

2. Which of the following is the correct Tailwind syntax to add vertical space of 0.5rem between child elements?

easy

A. space-y-2

B. space-x-2

C. space-y-1

D. space-x-1

Solution

1. Step 1: Identify vertical spacing class

   Vertical spacing between children uses space-y classes.

2. Step 2: Match spacing scale

   In Tailwind, 2 equals 0.5rem spacing.

3. Final Answer:

   space-y-2 -> Option A

4. Quick Check:

   Vertical 0.5rem space = space-y-2 [OK]

Hint: Use space-y for vertical gaps, number matches rem scale [OK]

Common Mistakes:

• Using space-x instead of space-y for vertical spacing
• Mixing spacing scale numbers
• Confusing margin and space classes

3. Given this HTML snippet:

<div class="flex space-x-6">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

What is the horizontal space between each button in pixels?

medium

A. 12px

B. 16px

C. 6px

D. 24px

Solution

1. Step 1: Understand the class space-x-6

   The space-x-6 class adds horizontal space between children.

2. Step 2: Convert Tailwind spacing scale to pixels

   In Tailwind, 6 equals 1.5rem. Since 1rem = 16px, 1.5rem = 24px.

3. Final Answer:

   24px -> Option D

4. Quick Check:

   space-x-6 = 1.5rem = 24px [OK]

Hint: Tailwind spacing 6 = 1.5rem = 24px horizontal gap [OK]

Common Mistakes:

• Confusing rem to px conversion
• Mixing space-x with space-y
• Assuming spacing is smaller than actual

4. You want to add vertical space between list items but accidentally use space-x-4 on a vertical stack. What will happen?

medium

A. No visible vertical space is added between items

B. Vertical space of 1rem is added correctly

C. Horizontal space of 1rem is added but items remain stacked vertically

D. The layout breaks and items overlap

Solution

1. Step 1: Understand space-x-4 effect

   space-x-4 adds horizontal space between children, not vertical.

2. Step 2: Consider vertical stacking

   If items are stacked vertically (default block), horizontal space adds gaps horizontally but does not separate vertically.

3. Final Answer:

   Horizontal space of 1rem is added but items remain stacked vertically -> Option C

4. Quick Check:

   space-x adds horizontal gaps, vertical stack stays vertical [OK]

Hint: Use space-y for vertical stacks, space-x for horizontal rows [OK]

Common Mistakes:

• Expecting vertical space from space-x
• Thinking space-x breaks vertical layout
• Confusing margin and space utilities

5. You have a grid of cards arranged in 3 columns. You want to add 1rem horizontal space between columns and 0.5rem vertical space between rows using Tailwind. Which class combination should you use on the grid container?

hard

A. space-x-4 space-y-2

B. space-x-2 space-y-4

C. space-x-4 space-y-4

D. space-x-2 space-y-2

Solution

1. Step 1: Match spacing values to Tailwind scale

   1rem corresponds to 4 and 0.5rem corresponds to 2 in Tailwind spacing scale.

2. Step 2: Assign horizontal and vertical spacing

   Horizontal space between columns uses space-x-4, vertical space between rows uses space-y-2.

3. Final Answer:

   space-x-4 space-y-2 -> Option A

4. Quick Check:

   1rem horizontal + 0.5rem vertical = space-x-4 space-y-2 [OK]

Hint: Match rem values to spacing scale: 1rem=4, 0.5rem=2 [OK]

Common Mistakes:

• Swapping horizontal and vertical spacing values
• Using wrong spacing scale numbers
• Applying space-x or space-y incorrectly on grid