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.