Block vs inline vs inline-block in CSS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main difference between block and inline elements?

Which statement best describes how block and inline elements behave in a browser?

A Block elements only take as much width as needed and flow within a line; inline elements take the full width available and start on a new line.

B Block elements take the full width available and start on a new line; inline elements only take as much width as needed and flow within a line.

C Both block and inline elements take the full width available but block elements can have padding and margin, inline elements cannot.

D Inline elements always start on a new line, block elements flow within a line.

💡 Hint

Think about how paragraphs and links behave differently in a text.

Block elements like <div> or <p> take the full width and start on a new line. Inline elements like <span> or <a> only take the space their content needs and flow inside a line.

📝 Syntax

intermediate

Which CSS rule correctly makes an element behave like inline-block?

Select the CSS declaration that makes an element behave like inline-block.

A display: inline-block;

B display: block-inline;

C display: inline_block;

D display: block-inline-block;

💡 Hint

Check the exact spelling and hyphenation of the display property value.

The correct CSS value to make an element behave like inline-block is inline-block. Other options are invalid CSS values and cause the property to be ignored.

❓ rendering

advanced

What will be the visual layout of these elements?

Given this HTML and CSS, what will you see in the browser?

<style>
.box { width: 5rem; height: 5rem; background: coral; margin: 0.5rem; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
</style>
<div class="block box">Block</div>
<div class="inline box">Inline</div>
<div class="inline-block box">Inline-block</div>

A The block box is on its own line, the inline and inline-block boxes appear side by side on the same line.

B All three boxes appear stacked vertically, each on its own line.

C The inline box is on its own line, block and inline-block boxes appear side by side.

D The inline-block box is hidden, block and inline boxes appear side by side.

💡 Hint

Remember how block elements start on new lines and inline elements flow inside lines.

The block element takes full width and appears on its own line. The inline and inline-block elements flow inline, so they appear side by side on the same line.

❓ selector

advanced

Which CSS selector targets only inline-block elements?

Given multiple elements with different display values, which selector matches only elements with display: inline-block?

A *:inline-block

B .inline-block

C :display(inline-block)

D [style*='inline-block']

💡 Hint

Think about how CSS attribute selectors work and what is valid syntax.

CSS does not have a direct selector for computed styles like display. But if inline styles are used, [style*='inline-block'] matches elements whose style attribute contains 'inline-block'. Other options are invalid or select by class, not display.

❓ accessibility

expert

How does using inline-block affect keyboard navigation and screen readers?

Which statement about accessibility is true when using display: inline-block on interactive elements?

A Inline-block elements automatically become focusable and are always announced as buttons by screen readers.

B Inline-block elements are ignored by screen readers and cannot be focused by keyboard navigation.

C Inline-block elements behave exactly like inline elements for accessibility, so they cannot receive keyboard focus unless explicitly made focusable.

D Inline-block elements behave like inline elements visually but keep block-level accessibility features, so keyboard navigation and screen readers treat them as blocks.

💡 Hint

Consider how display affects focus and screen reader behavior by default.

Inline-block changes visual layout but does not change the element's semantic role or default accessibility behavior. Inline-block elements behave like inline elements for accessibility, so they do not receive keyboard focus unless made focusable (e.g., with tabindex).