Tutorials › CSS Mastery › Display Property

Display Property

4 min read Quiz at the end

display controls layout. block takes full width on a new line. inline flows with text. inline-block is inline but accepts width and height. flex and grid are powerful systems for arranging groups of elements.

The display Property

display: block;         /* full width, new line */
display: inline;        /* flows with text */
display: inline-block;  /* inline but can set w/h */
display: flex;          /* flexbox container */
display: grid;          /* grid container */
display: none;          /* hidden (removed from layout) */
display: contents;      /* removes wrapper visually */

visibility: hidden;     /* hidden but keeps space */

← Margin and Padding Next: Flexbox →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which display value removes an element from layout?

💡 display: none removes the element from the document flow entirely.

2. Flexbox is set with:

💡 display: flex activates Flexbox on the container.

3. display: inline-block allows:

💡 inline-block elements flow inline but accept width, height, padding, margin.

4. What does visibility: hidden do?

💡 visibility: hidden hides the element but keeps its space in the layout.

5. display: grid creates:

💡 display: grid creates a CSS Grid container for 2-dimensional layout.

Quick Access

Display Property

The display Property

Test your understanding before moving on