Block, inline, and inline-block in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding display types in Tailwind CSS

Which Tailwind CSS class makes an element behave like an inline-block element, allowing it to have width and height but still flow inline with text?

A block

B inline-block

C inline

D flex

💡 Hint

Think about which display type lets elements sit side by side but still accept box model properties like width and height.

The inline-block display type allows elements to flow inline with text but also accept width and height styling. In Tailwind CSS, the class inline-block sets this behavior.

📝 Syntax

intermediate

Tailwind class for block display

Which Tailwind CSS class correctly sets an element to behave as a block-level element, making it take the full width available and start on a new line?

A block

B inline

C inline-block

D hidden

💡 Hint

Block elements usually start on a new line and stretch full width by default.

The block class in Tailwind CSS sets the display property to block, making the element start on a new line and take the full width available.

❓ rendering

advanced

Visual difference between inline and block elements

Given two <span> elements styled with Tailwind classes, one with inline and the other with block, what will be the visual difference in the browser?

Tailwind

<span class="inline bg-blue-300">Inline</span><span class="block bg-red-300">Block</span>

A The first span appears inline, the second starts on a new line and stretches full width.

B Both spans appear side by side on the same line.

C Both spans start on new lines and stretch full width.

D The first span is hidden, the second is visible.

💡 Hint

Remember that block elements start on new lines and inline elements flow within text.

The inline class keeps the first span inline, so it stays on the same line as other content. The block class forces the second span to start on a new line and take full width.

❓ selector

advanced

Choosing the correct Tailwind class for inline-block layout

You want to place three buttons side by side with some spacing, each having a fixed width and height. Which Tailwind CSS display class should you apply to the buttons to achieve this layout?

A block

B inline

C hidden

D inline-block

💡 Hint

Buttons need to flow inline but also respect width and height.

The inline-block class allows elements to sit side by side and accept width and height. Using block would stack them vertically, and inline ignores width and height.

❓ accessibility

expert

Accessibility impact of display types

Which statement about the accessibility impact of using block, inline, and inline-block display types is correct?

A Using <code>inline-block</code> always improves keyboard navigation because elements are focusable by default.

B Block elements create natural landmarks for screen readers, improving content structure perception.

C Changing display types does not affect screen reader reading order or keyboard navigation inherently.

D Inline elements cannot have ARIA roles or labels applied, reducing accessibility.

💡 Hint

Think about how display affects visual layout versus semantic structure.

Display types control visual layout but do not inherently change the semantic structure or accessibility tree. Screen readers and keyboard navigation rely on semantic HTML and ARIA attributes, not display styles.