Display property in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS display property control?

The display property controls how an element is shown on the page, such as whether it behaves like a block, inline, or is hidden.

beginner

What is the difference between display: block; and display: inline;?

display: block; makes the element take the full width and start on a new line. display: inline; makes the element flow within text without starting a new line.

beginner

What does display: none; do to an element?

It hides the element completely. The element does not take up any space on the page and is not visible.

intermediate

Name two common values of the display property used for layout.

Two common values are block and inline. Others include flex and grid for advanced layouts.

intermediate

How does display: flex; help in web design?

display: flex; creates a flexible container that arranges child elements in a row or column, making it easier to align and space items responsively.

Which display value makes an element invisible and removes it from the page layout?

A inline

B hidden

C none

D block

display: none; hides the element and removes it from the layout. hidden is not a valid display value.

What happens when you set display: inline; on a <div> element?

A It behaves like inline text and does not start a new line.

B It creates a flexible container.

C It becomes invisible.

D It behaves like a block element and starts on a new line.

display: inline; makes the element flow with text and not start a new line.

Which display value is best for creating a flexible layout that aligns items horizontally or vertically?

A inline

B flex

C block

D none

display: flex; creates a flexible container for layout alignment.

If you want an element to take the full width available and start on a new line, which display value should you use?

A block

B inline

C none

D flex

display: block; makes the element take full width and start on a new line.

Which of these is NOT a valid display property value?

A flex

B inline-block

C grid

D hidden

hidden is not a valid display value. To hide elements, use display: none;.

Explain how the display property affects the layout of elements on a webpage.

Think about how elements behave visually and how they take space.

Describe a situation where you would use display: flex; instead of display: block;.

Consider how you arrange multiple items in a container.