Why display modes matter in Tailwind - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you use block display mode?

In Tailwind CSS, what visual effect does applying block display mode have on an element?

A The element stays inline with other elements and only takes up as much width as its content.

B The element takes up the full width available and starts on a new line.

C The element is hidden and does not appear on the page.

D The element floats to the right side of its container.

💡 Hint

Think about how paragraphs behave in a text document.

Block elements take up the full width and start on a new line, pushing content below them. This is why block display mode makes elements behave like paragraphs or divs.

📝 Syntax

intermediate

Which Tailwind class correctly sets an element to inline display?

You want an element to flow inline with text and other elements. Which Tailwind CSS class should you use?

A inline

B block

C inline-block

D flex

💡 Hint

Inline elements do not start on a new line and only take as much width as needed.

The inline class sets the display to inline, making the element flow with text and other inline elements.

❓ rendering

advanced

What is the visual difference between inline and inline-block display modes?

Consider two elements styled with Tailwind classes inline and inline-block. What is the key visual difference you will see in the browser?

A <code>inline-block</code> elements are hidden, <code>inline</code> elements are visible.

B <code>inline</code> elements always start on a new line, <code>inline-block</code> do not.

C <code>inline-block</code> elements can have width and height set, while <code>inline</code> elements cannot.

D <code>inline</code> elements float to the right, <code>inline-block</code> float to the left.

💡 Hint

Try setting width on both types and see what happens.

inline-block elements behave like inline elements but allow setting width and height. inline elements ignore width and height settings.

❓ selector

advanced

Which Tailwind class combination creates a flex container with items stacked vertically?

You want a container to use flexbox and stack child items vertically. Which Tailwind classes achieve this?

A block flex-col

B flex flex-row

C inline flex-col

D flex flex-col

💡 Hint

Flex direction controls stacking direction.

flex makes the container a flexbox. flex-col sets the direction to column, stacking items vertically.

❓ accessibility

expert

Why is choosing the right display mode important for keyboard navigation?

How can incorrect display modes affect users who navigate websites using only a keyboard?

A Incorrect display modes can cause focusable elements to be unreachable or skipped by keyboard navigation.

B Display modes only affect colors and have no impact on keyboard users.

C Display modes automatically add ARIA labels for keyboard users.

D Keyboard navigation depends solely on HTML tags, not CSS display modes.

💡 Hint

Think about how elements appear and behave visually and structurally.

Some display modes can hide elements or change their flow, making it impossible for keyboard users to reach them with tab keys. Proper display ensures all interactive elements are accessible.