Block, inline, and inline-block in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does a block element do in a webpage layout?

A block element takes up the full width available, starting on a new line. It stacks vertically, like building blocks in a column.

beginner

How does an inline element behave differently from a block element?

An inline element only takes up as much width as its content and sits side-by-side with other inline elements on the same line.

intermediate

What is special about inline-block elements?

inline-block elements flow inline like text but can have width and height set like block elements. They combine features of both.

beginner

Which Tailwind CSS class makes an element behave like a block element?

The Tailwind class block sets the element's display to block, making it take full width and start on a new line.

beginner

How do you make an element inline-block using Tailwind CSS?

Use the Tailwind class inline-block to make an element flow inline but still accept width and height.

Which display type makes an element take the full width and start on a new line?

A flex

B inline

C inline-block

D block

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

Which Tailwind class makes an element behave like inline text but allows width and height?

A inline-block

B block

C inline

D hidden

The inline-block class in Tailwind allows inline flow with block sizing.

What happens if you use inline display on a div?

A It flows inline and only takes content width

B It behaves like a block element

C It disappears

D It becomes a flex container

Inline display makes the element flow inline and only take as much width as its content.

Which display type allows setting width and height but flows inline?

A inline

B inline-block

C block

D grid

Inline-block elements flow inline but accept width and height settings.

In Tailwind, which class would you use to make a paragraph behave like a block element?

A inline

B float-left

C block

D inline-block

The block class sets display to block in Tailwind.

Explain the difference between block, inline, and inline-block display types using simple examples.

Think about how text and images sit in a sentence versus paragraphs.

How do Tailwind CSS classes block, inline, and inline-block affect element layout?

Relate each class to the CSS display property it sets.