CSSLesson 6 of 10Jump to practice

The display property

Switch elements between block, inline, inline-block and none.

In the HTML course you saw that elements are either block or inline. The display property lets you change that.

Value Starts a new line? Accepts width and height?
block Yes Yes
inline No No, it’s as big as its content
inline-block No Yes
none The element is gone. It takes no space at all

Later lessons add two more values, flex and grid, for layout.

Four display values
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; }
  span { background: #ffe08a; width: 120px; height: 40px; margin: 4px; }
  .block { display: block; }
  .inline-block { display: inline-block; }
</style>
</head>
<body>
<p>inline (the default): width and height are ignored</p>
<span>One</span><span>Two</span><span>Three</span>

<p>block: each one on its own line</p>
<span class="block">One</span><span class="block">Two</span>

<p>inline-block: side by side, with a size</p>
<span class="inline-block">One</span><span class="inline-block">Two</span><span class="inline-block">Three</span>
</body>
</html>
Result

A horizontal menu

Menus are lists, and list items are blocks. inline-block lines them up in a row:

From list to menu
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  ul { list-style: none; padding: 0; margin: 0; background: #123b3c; }
  li { display: inline-block; }
  a { display: block; padding: 12px 16px; color: white; text-decoration: none; font-family: sans-serif; }
  a:hover { background: #0b7a75; }
</style>
</head>
<body>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Courses</a></li>
  <li><a href="#">About</a></li>
</ul>
</body>
</html>
Result

Notice display: block on the links. It makes the whole padded area clickable, not just the text.

Hiding things

none vs hidden
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  div { background: #cfeee9; padding: 8px; margin: 4px 0; font-family: sans-serif; }
  .gone { display: none; }
  .invisible { visibility: hidden; }
</style>
</head>
<body>
<div>Box 1</div>
<div class="gone">Box 2 (display: none)</div>
<div>Box 3</div>
<div class="invisible">Box 4 (visibility: hidden)</div>
<div>Box 5</div>
</body>
</html>
Result

Box 2 leaves no gap. Box 4 leaves an empty space where it would be.

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Hide the pop-up completely, so it takes up no space.

    .popup {
  display: ;
}

  2. Exercise 2

    Make the list items sit side by side, but still accept a width and height.

    li {
  display: ;
  width: 100px;
}

Quiz: 3 questions

1. What is the difference between display: none and visibility: hidden?
2. You set width: 200px on a <span>. What happens?
3. What is the default display of a <div>?

Finish the practice to complete this lesson.