Showing and hiding (display)

How boxes flow

• Some elements are block: they stack on top of each other and fill the width — <div>, <p>, <h1>.
• Some are inline: they sit side by side, taking only as much room as they need — <span>, <a>, <strong>.
• display lets you change which way an element behaves.

display: none

• display: none; removes an element from the page completely.
• It's how menus, pop-ups, and "read more" sections stay hidden until needed.
• The element is still in your HTML — it just isn't shown.
• display: block changes the other way: below, an inline <span> gets a whole line of its own, and its background fills the width.

<style>
  .pill { display: block; background-color: #def; padding: 6px; }
  .gone { display: none; }
</style>
<span class="pill">A span, now a block</span>
<span class="gone">You can't see me</span>

Common mistakes

• display: none removes the element and its space; visibility: hidden keeps its space.
• block starts a new line; inline does not.

Now you try

• display: none hides; display: block makes an element take its own line.
• Hide one element, then change how another displays.