The display property
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. What does display: none do to an element?
2. Which display value makes an element flow inline but still accept width and height?
3. True or false: a block element starts on a new line.
4. True or false: you can set width and height on display: inline elements.
5. Which display value turns an element into a flex container?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1div { display: none; } | Anav { display: flex; } | |
| 2a { display: inline-block; width: 120px; padding: 8px; } | Bp { display: block; } | |
| 3display: block makes an element start on a new line and fill the available width | Cinline-block must be hyphenated — write display: inline-block; not display: inline block; with a space | |
| 4display: flex turns a container into a flexbox layout for its direct children | DFlows inline with text but accepts width, height and padding like a block element — used for buttons and styled links | |
| 5div { display: inline block; } | ECSS property names must be lowercase — 'Display' should be written as 'display' | |
| 6span { Display: inline; } | FHides the element completely and removes it from the layout — no space is left where it was |
C
Definitions
display
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
p { display: _____; }
2.
span { display: ______; }
3.
div { display: ____; }
4.
a { display: ____________; }
5.
nav { display: ____; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
p { display block; }
B
div { display: none; }
C
span { display: inline; }
Question 2
A
div { display: flex; }
B
span { display: inline block; }
C
p { display: none; }
Question 3
A
nav { display: flex; }
B
p { display: block; }
C
span { Display: inline; }
Question 4
A
div { display: flex; }
B
p { display: block; }
C
a { display: inline; }
D
span { display: inlne; }
Question 5
A
header { display: flex; }
B
nav { display: block; }
C
p { display: inline; }
D
span { display: none; }
E
div { display: flex-row; }
Answer Key
The display property
Section A: Quick Questions
Q1
A — Hides it and removes it from the layout
Q2
B — inline-block
Q3
A — True
Q4
B — False
Q5
A — flex
Section B: Match the Pairs
Q1
div { display: none; } → Hides the element completely and removes it from the layout — no space is left where it was
Q2
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
Q3
display: block makes an element start on a new line and fill the available width → p { display: block; }
Q4
display: flex turns a container into a flexbox layout for its direct children → nav { display: flex; }
Q5
div { display: inline block; } → inline-block must be hyphenated — write display: inline-block; not display: inline block; with a space
Q6
span { Display: inline; } → CSS property names must be lowercase — 'Display' should be written as 'display'
Section C: Definitions
Q1
display — A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.Section D: Fill in the Blanks
Q1
p { display: block; }Q2
span { display: inline; }Q3
div { display: none; }Q4
a { display: inline-block; }Q5
nav { display: flex; }Section E: Spot the Error
Q1
A — CSS declarations require a colon. It should be display: block; not display block;
Q2
B — The value for inline-block must be hyphenated: display: inline-block; not display: inline block; with a space.
Q3
C — CSS property names must be lowercase. 'Display' should be written as 'display'.
Q4
D — 'inlne' is a typo. The correct value is display: inline;
Q5
E — 'flex-row' is not a valid display value. Use display: flex; and then set flex-direction: row; separately.