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.

Practice

1. Which Tailwind class makes an element behave like a block element that breaks the line and fills the container width?

easy

A. block

B. inline

C. inline-block

D. flex

Solution

1. Step 1: Understand block element behavior

   Block elements start on a new line and take full container width.

2. Step 2: Match Tailwind class to behavior

   The Tailwind class block applies this behavior.

3. Final Answer:

   block -> Option A

4. Quick Check:

   Block = block [OK]

Hint: Block elements use block class in Tailwind [OK]

Common Mistakes:

• Confusing inline with block behavior
• Using inline-block which does not break line
• Choosing flex which is for flexbox layout

2. Which Tailwind class correctly applies inline-block display to an element?

easy

A. inline-block

B. hidden

C. block

D. inline

Solution

1. Step 1: Recall Tailwind display classes

   inline-block is the class that sets display to inline-block.

2. Step 2: Confirm class matches inline-block behavior

   Inline-block elements flow inline but can have width and height.

3. Final Answer:

   inline-block -> Option A

4. Quick Check:

   Inline-block = inline-block [OK]

Hint: Use inline-block class for inline-block display [OK]

Common Mistakes:

• Using inline which lacks block sizing
• Choosing block which breaks line
• Selecting hidden which hides element

3. What will be the visual layout of these two elements with Tailwind classes?

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

medium

A. Red inline element breaks line and appears below block

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

C. Both elements hidden due to conflicting classes

D. Block element on its own line, red inline text flows next to it

Solution

1. Step 1: Understand block element behavior

   The div with block class breaks line and fills width.

2. Step 2: Understand inline element behavior

   The span with inline class flows inline, so it appears next to following text if space allows.

3. Final Answer:

   Block element on its own line, red inline text flows next to it -> Option D

4. Quick Check:

   Block breaks line, inline flows inline [OK]

Hint: Block breaks line; inline stays inline [OK]

Common Mistakes:

• Thinking inline breaks line like block
• Assuming both appear side by side
• Confusing element types and classes

4. You want an element to flow inline but also set width and height. Which Tailwind class is incorrectly used here?

<div class="inline w-32 h-16 bg-green-300">Box</div>

medium

A. w-32 is invalid for inline elements

B. inline is incorrect because width and height won't apply properly

C. h-16 causes syntax error with inline

D. bg-green-300 hides the element

Solution

1. Step 1: Understand inline element sizing

   Inline elements ignore width and height properties.

2. Step 2: Identify class causing issue

   The inline class causes the element to behave inline, so width and height won't apply.

3. Final Answer:

   inline is incorrect because width and height won't apply properly -> Option B

4. Quick Check:

   Inline ignores width/height [OK]

Hint: Inline ignores width/height; use inline-block instead [OK]

Common Mistakes:

• Thinking width/height work on inline
• Blaming width or height classes
• Confusing background color with visibility

5. You want two buttons side by side with padding and fixed size, but they should not break lines. Which Tailwind classes combination is best?

<button class="?">Btn 1</button>
<button class="?">Btn 2</button>

hard

A. inline w-24 h-10 p-2 bg-blue-500 text-white

B. block w-24 h-10 p-2 bg-blue-500 text-white

C. inline-block w-24 h-10 p-2 bg-blue-500 text-white

D. hidden w-24 h-10 p-2 bg-blue-500 text-white

Solution

1. Step 1: Identify display needed for side-by-side buttons

   Buttons should flow inline but keep size and padding, so inline-block is needed.

2. Step 2: Check other classes for size and style

   w-24 and h-10 set fixed size, p-2 adds padding, and colors style the buttons.

3. Final Answer:

   inline-block w-24 h-10 p-2 bg-blue-500 text-white -> Option C

4. Quick Check:

   Inline-block + size + padding = side-by-side buttons [OK]

Hint: Use inline-block for sized inline elements [OK]

Common Mistakes:

• Using block breaks buttons into separate lines
• Using inline ignores width and height
• Using hidden hides buttons