🎓 A1Learner
🔍

CSS Display

The display property sets how an element sits in the flow of the page. Block elements take a whole row, and inline elements flow within a line of text.

Items in a row

Each list item takes its own row by default. The inline value puts all three items on one row.

li {
  display: inline;
}

A link with a width

A plain inline link ignores a width. The inline-block value flows with the text and accepts the width.

a {
  display: inline-block;
  width: 120px;
}

Remove the picture

The none value removes the element from the page layout. The content after it moves up to fill the space.

.pic {
  display: none;
}

Hide but keep the space

The visibility property hides an element without removing it. Its space stays in the layout, so nothing else moves.

.pic {
  visibility: hidden;
}

Example

li {
  display: inline;
}
a {
  display: inline-block;
  width: 120px;
}
#demo {
  display: none;
}

Key points

  • Block: a display value that puts an element on its own row
  • Inline: a display value that flows an element within a line of text
  • Inline-block: a display value that flows with text and still takes a width and height
  • Every element has a default display value from HTML.
  • Paragraphs and lists are block by default, and links and images are inline by default.
  • An inline element ignores width, height and top and bottom margins.

In this example, the first rule puts the three list items on one row. The second rule makes the link flow with the text and take a width of 120 pixels. The last rule removes the demo paragraph from the page. Each rule changes how its element sits in the flow.

Note

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

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does display: none do to an element?