Block vs inline vs inline-block in CSS - Quick Revision & Key Differences

Recall & Review

beginner

What is a block-level element in CSS?

A block-level element takes up the full width available, starts on a new line, and can have width and height set. Examples include <div> and <p>.

beginner

What is an inline element in CSS?

An inline element only takes up as much width as its content, does not start on a new line, and ignores width and height properties. Examples include <span> and <a>.

intermediate

How does inline-block differ from inline and block elements?

Inline-block elements flow like inline elements (do not start on a new line) but can have width and height set like block elements.

beginner

Which CSS property controls whether an element is block, inline, or inline-block?

The 'display' property controls this. For example, 'display: block;', 'display: inline;', and 'display: inline-block;'.

intermediate

Why might you use inline-block instead of inline or block?

Use inline-block when you want elements to sit side by side but still control their size with width and height.

Which element type starts on a new line and takes full width by default?

A Inline-block

B Inline

C None of the above

D Block

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

Which display value allows setting width and height but does not start on a new line?

A inline-block

B inline

C block

D none

Inline-block elements behave like inline but accept width and height.

Which of these elements is inline by default?

A &lt;span&gt;

B &lt;div&gt;

C &lt;p&gt;

D &lt;section&gt;

<span> is inline by default.

What CSS property changes an element from inline to block?

A position

B float

C display

D visibility

The 'display' property controls the element's display type.

If you want elements side by side with control over size, which display value is best?

A block

B inline-block

C flex

D inline

Inline-block lets elements sit side by side and lets you set width and height.

Explain the differences between block, inline, and inline-block elements in CSS.

Think about how elements behave in a paragraph or a row.

Describe a situation where using inline-block is better than block or inline.

Imagine buttons or boxes in a row that need specific sizes.