display

block elements start on a new line and fill the width; inline elements flow within the text and ignore width and height; inline-block flows and respects them; none removes the element from the layout.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Half of 'why is this on its own line' and all of 'why does width do nothing' is display. Changing it is one declaration.

How to think about it

Ask: should this sit in a line of text or be its own box? Then set display to match, and remember that none hides and takes the space away.

Worked example

<span class="tag">inline</span><span class="tag">inline</span>

Two spans sit on one line: inline flows with the text.

<div class="row">block</div>

A div starts on a new line and fills the width: block.

.tag { display: inline-block; padding: 4px; }

inline-block: flows in the line and respects padding, width and height.

<p class="hide">Gone</p>

A paragraph that is about to vanish.

.hide { display: none; }

Not drawn, takes no space: the page closes up around it.

Your turn

Hide the banner and its space.

.banner { display: ; }

The trap

Setting width on a span and wondering why nothing happens. Inline elements ignore width and height; make it inline-block or block first.

Practise display on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.