← HTML & CSS

The display property

A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.

Part of: HTML and CSS Journey — Module 49

What it does: By default <p> is already block, but display: block can be set explicitly. The paragraph starts on its own line and spans the full container. Setting display: flex on nav makes its children (typically <a> or <li> elements) flex items, enabling flexible alignment and sizing. display: none removes the element from layout and leaves no space. visibility: hidden keeps the space but makes it invisible. display: inline-block flows within text like inline, but unlike plain inline, it respects width, height and all padding/margin values. display: flex is the correct value. 'flexbox' is not a valid CSS display value. 'inline block' with a space is not a valid CSS value. The hyphenated form inline-block is required.

Common mistakes: CSS declarations require a colon. It should be display: block; not display block;. The value for inline-block must be hyphenated: display: inline-block; not display: inline block; with a space.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of The display property (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

What does display: none do to an element?

Hides it and removes it from the layoutMakes it invisible but keeps its space

Matches

div { display: inline block; }

↓

inline-block must be hyphenated — write display: inline-block; not display: inline block; with a space

Applying

Meanings

Term

display

Meaning

A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.

Practice

p { display: block; }

Testing

Gaps

p { display: ; }

Check Answer

Spots

1p { display block; }

2div { display: none; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. What does display: none do to an element?

A. Hides it and removes it from the layout ✓

B. Makes it invisible but keeps its space

display: none removes the element from layout and leaves no space. visibility: hidden keeps the space but makes it invisible.

2. Which display value makes an element flow inline but still accept width and height?

A. inline-block ✓

B. inline

display: inline-block flows within text like inline, but unlike plain inline, it respects width, height and all padding/margin values.

3. True or false: a block element starts on a new line.

A. True ✓

B. False

Block elements (like div and p) always start on a new line and expand to fill the available width by default.

4. True or false: you can set width and height on display: inline elements.

A. False ✓

B. True

display: inline ignores width and height — the element only takes up as much space as its content. Use inline-block to add dimensions.

5. Which display value turns an element into a flex container?

A. flex ✓

B. flexbox

display: flex is the correct value. 'flexbox' is not a valid CSS display value.

Match the Pairs

div { display: none; } → Hides the element completely and removes it from the layout — no space is left where it was

a { display: inline-block; width: 120px; padding: 8px; } → Flows inline with text but accepts width, height and padding like a block element — used for buttons and styled links

display: block makes an element start on a new line and fill the available width → p { display: block; }

display: flex turns a container into a flexbox layout for its direct children → nav { display: flex; }

div { display: inline block; } → inline-block must be hyphenated — write display: inline-block; not display: inline block; with a space

span { Display: inline; } → CSS property names must be lowercase — 'Display' should be written as 'display'

Key Term

display

A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.

Fill in the Blanks

1. p { display: block; }

Hint: Type the display value that makes an element take up the full available width on its own line

2. span { display: inline; }

Hint: Type the display value that makes an element flow within text without starting a new line

3. div { display: none; }

Hint: Type the display value that hides an element completely — removing it from the layout

4. a { display: inline-block; }

Hint: Type the display value that flows inline but accepts width and height like a block element

5. nav { display: flex; }

Hint: Type the display value that turns a container into a flexbox layout

Spot the Error

Question 1

A p { display block; }

B div { display: none; }

C span { display: inline; }

Line A — CSS declarations require a colon. It should be display: block; not display block;

Question 2

A div { display: flex; }

B span { display: inline block; }

C p { display: none; }

Line B — The value for inline-block must be hyphenated: display: inline-block; not display: inline block; with a space.

Question 3

A nav { display: flex; }

B p { display: block; }

C span { Display: inline; }

Line C — CSS property names must be lowercase. 'Display' should be written as 'display'.

Question 4

A div { display: flex; }

B p { display: block; }

C a { display: inline; }

D span { display: inlne; }

Line D — 'inlne' is a typo. The correct value is display: inline;

Question 5

A header { display: flex; }

B nav { display: block; }

C p { display: inline; }

D span { display: none; }

E div { display: flex-row; }

Line E — 'flex-row' is not a valid display value. Use display: flex; and then set flex-direction: row; separately.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?