none vs visibility: hidden vs contents
Look at the preview: a 44px blank gap for the hidden box, no border around the pink text, and the first box is gone entirely.
display decides what kind of box an element makes: a block that takes a full row, an inline box that flows inside text, an inline-block mix of both, no box at all (none, contents), or a block that contains its own layout (flow-root).
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make three <a> tags look like 120px-wide, 40px-tall buttons in a row, without Flexbox. Log the offsetWidth of the first.
A .list wrapper must disappear from layout while its three .item children stay. Log the wrapper's getBoundingClientRect().height and the number of visible items.
Explain it without notes
What are the differences between block, inline and inline-block boxes?
Compare display: none, visibility: hidden and display: contents.
What problem does display: flow-root solve?
What do the outer and inner display types mean? Give examples.
Preview
Console
Nothing logged yet.Expected console output
display: none height: 0
visibility: hidden height: 44
display: contents box height: 0
its child still shows: true