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.