Display property in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will be the layout of the boxes?

Given the CSS below, how will the three colored boxes be arranged in the browser?

CSS

div.box {
  width: 5rem;
  height: 5rem;
  margin: 0.5rem;
}
#box1 {
  background-color: red;
  display: inline-block;
}
#box2 {
  background-color: blue;
  display: inline-block;
}
#box3 {
  background-color: green;
  display: block;
  width: 100%;
}

A Red and green boxes side by side; blue box below taking full width.

B All three boxes appear stacked vertically, each taking full width.

C Red and blue boxes appear side by side on the same line; green box appears below them, taking full width.

D All three boxes appear side by side on the same line.

💡 Hint

Remember that 'inline-block' elements sit next to each other horizontally, while 'block' elements take full width and start on a new line.

The red and blue boxes use display: inline-block;, so they appear side by side horizontally. The green box uses display: block;, so it takes the full width and appears below the inline-block boxes.

🧠 Conceptual

intermediate

Which display value makes an element ignore width and height?

Which display property value causes an element to ignore its width and height settings and only take up as much space as its content?

A inline

B block

C flex

D grid

💡 Hint

Think about inline elements like <span> that wrap tightly around their text.

Elements with display: inline; ignore width and height properties and only take the space their content needs.

❓ selector

advanced

Which CSS selector targets only block elements?

Given multiple elements with different display values, which CSS selector will style only those with display: block;?

A *[style*='display: block']

B :has(display: block)

C :where(block)

D :is(div, p, section)

💡 Hint

CSS cannot directly select elements by computed style, but can select by attribute values.

Only option A uses an attribute selector to match elements with inline styles containing 'display: block'. Other options are invalid or do not select by display property.

❓ layout

advanced

How does display: contents; affect layout?

What is the visual effect of applying display: contents; to a container element?

A The container becomes a flex container, arranging children in a row.

B The container becomes invisible and its children are hidden as well.

C The container becomes a block-level element with a border around its children.

D The container disappears visually but its children remain visible and behave as if they were direct children of the container's parent.

💡 Hint

Think of the container as a ghost that lets its children show up directly in its place.

display: contents; makes the container element itself disappear from the layout, but its children remain visible and act as if they are direct children of the container's parent.

❓ accessibility

expert

What accessibility issue can arise from using display: none;?

Which of the following is a true statement about using display: none; on elements regarding accessibility?

A Elements with <code>display: none;</code> are hidden visually but still focusable by keyboard navigation.

B Elements with <code>display: none;</code> are hidden visually and also removed from the accessibility tree, so screen readers ignore them.

C Elements with <code>display: none;</code> remain visible to screen readers but hidden visually.

D Elements with <code>display: none;</code> become semi-transparent but remain interactive.

💡 Hint

Think about whether hidden elements can be read aloud by screen readers.

Elements styled with display: none; are removed from the accessibility tree, so screen readers do not announce them. This is important to hide content both visually and from assistive technologies.

Practice

1. What does the CSS display: none; property do to an element on a webpage?

easy

A. It hides the element and removes it from the page layout.

B. It makes the element visible but transparent.

C. It changes the element to a block-level element.

D. It makes the element inline without line breaks.

Solution

1. Step 1: Understand the effect of display: none;

   This property hides the element completely and removes it from the page layout, so it takes no space.

2. Step 2: Compare with other display values

   Unlike visibility: hidden; which hides but keeps space, display: none; removes the element entirely.

3. Final Answer:

   It hides the element and removes it from the page layout. -> Option A

4. Quick Check:

   display: none; = hidden and no space [OK]

Hint: None means hidden and no space taken [OK]

Common Mistakes:

• Confusing with visibility: hidden
• Thinking it only makes element invisible but keeps space
• Mixing with display: inline or block

2. Which of the following is the correct CSS syntax to make an element a flex container?

easy

A. display-flex: true;

B. display = flex;

C. display: flex;

D. flex-display: block;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : to assign values, not equals =.

2. Step 2: Identify the correct property and value

   The property is display and the value to create a flex container is flex.

3. Final Answer:

   display: flex; -> Option C

4. Quick Check:

   Correct CSS syntax uses colon and display: flex; [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Incorrect property names like display-flex
• Adding extra words like true

3. Given this HTML and CSS, what will be the visible layout of the items?

<div class='container'>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

.container {
  display: flex;
  flex-direction: column;
}

medium

A. The items A, B, C appear as inline text separated by spaces.

B. The items A, B, C appear side by side horizontally.

C. The items A, B, C are hidden and not visible.

D. The items A, B, C appear stacked vertically in a column.

Solution

1. Step 1: Understand display: flex; with flex-direction: column;

   Flex container arranges children in a flexible box. The column direction stacks items vertically.

2. Step 2: Predict the layout of the spans

   Each <span> will appear one below the other in a vertical column.

3. Final Answer:

   The items A, B, C appear stacked vertically in a column. -> Option D

4. Quick Check:

   flex-direction: column; stacks vertically [OK]

Hint: Flex column stacks items vertically [OK]

Common Mistakes:

• Assuming flex always arranges horizontally
• Confusing inline elements with flex behavior
• Ignoring flex-direction property

4. You want to hide a paragraph but keep its space on the page. Which CSS property and value should you use? The following code does not work as expected:

p {
  display: none;
}

What is the correct fix?

medium

A. Use display: inline; to hide the paragraph

B. Change display: none; to visibility: hidden;

C. Add opacity: 0; instead of display

D. Change display: none; to display: block;

Solution

1. Step 1: Understand difference between display: none; and visibility: hidden;

   display: none; removes element and space, visibility: hidden; hides element but keeps space.

2. Step 2: Apply the correct property to keep space

   Use visibility: hidden; to hide content but preserve layout space.

3. Final Answer:

   Change display: none; to visibility: hidden; -> Option B

4. Quick Check:

   Keep space by using visibility: hidden; [OK]

Hint: Use visibility hidden to keep space but hide [OK]

Common Mistakes:

• Using display none and expecting space to remain
• Using opacity 0 but element still clickable
• Confusing display inline with hiding

5. You have a navigation bar with list items. You want the list items to appear horizontally with equal spacing and be centered. Which CSS display property and layout method should you use?

hard

A. Use display: flex; on the container with justify-content: space-around;.

B. Use display: block; on list items and text-align: center; on the container.

C. Use display: inline; on the container and margin: auto; on list items.

D. Use display: grid; on list items with grid-template-columns: repeat(3, 1fr);.

Solution

1. Step 1: Identify the container and desired layout

   The container holds list items that should be horizontal, spaced equally, and centered.

2. Step 2: Choose display and alignment properties

   display: flex; on container creates a flexible row layout. justify-content: space-around; spaces items evenly with space around them.

3. Final Answer:

   Use display: flex; on the container with justify-content: space-around;. -> Option A

4. Quick Check:

   Flex + justify-content space-around = horizontal equal spacing [OK]

Hint: Flex container with justify-content spaces items evenly [OK]

Common Mistakes:

• Applying display properties to wrong elements
• Using block display which stacks vertically
• Confusing inline display with container layout