The display property

The layout switch

Earlier you learned that elements are mostly block or inline. That behaviour is not built into the tag; it is the default value of a CSS property called display. You can change it for any element:

span { display: block; }   /* a span that behaves like a div */
div  { display: inline; }  /* a div that flows within text */

The element keeps its meaning. A span is still a span for accessibility; display only changes how its box takes part in layout.

The values you need first

<style>
  .item { background: #dbeafe; border: 2px solid #3b82f6; padding: 6px 12px; margin: 4px; }
  .b  { display: block; }
  .i  { display: inline; width: 200px; height: 80px; }   /* width and height ignored */
  .ib { display: inline-block; width: 120px; height: 50px; }
</style>
<span class="item b">block: new line, full width</span>
<span class="item i">inline: only as wide as its text, ignores width and height</span>
<span class="item ib">inline-block: sits in a line yet obeys size</span>
<span class="item ib">second one</span>

• block: starts on a new line and stretches across the container. Width, height, margin and padding all apply.
• inline: flows within text, like a word. width and height are ignored, and top and bottom margins have no layout effect.
• inline-block: sits in a line like inline, but its inside behaves like a block. Use it for things like buttons and badges that need a size yet should stay beside text.
• none: the element generates no box at all.

Hiding things

.hidden { display: none; }
.invisible { visibility: hidden; }
.sr-only { /* visually hidden but still read aloud */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

• display: none: no space, not shown, not read by screen readers. Right for menus that are closed.
• visibility: hidden: invisible, but the empty space remains, and it is also hidden from assistive technology.
• A "screen-reader only" class hides an element visually but keeps it available to assistive tools. Useful for extra labels.
• opacity: 0 makes an element transparent but still clickable and read aloud; rarely what you want.

There is also an HTML hidden attribute that works like display: none until your own CSS overrides it.

A list becomes a menu

A classic use is turning a vertical list of links into a horizontal menu:

<style>
  nav ul { list-style: none; margin: 0; padding: 0; }
  nav li { display: inline-block; margin-right: 8px; }
  nav a  { display: block; padding: 8px 14px; background: #1e293b; color: white; text-decoration: none; border-radius: 6px; }
</style>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Notice a is set to display: block so the whole padded area is clickable, not just the text. This is a good trick for any link that should have a large target.

display: flex and display: grid

Two more values do the heavy lifting in modern layouts. They do not change the element itself so much as turn it into a container that arranges its children:

.row  { display: flex; }   /* children in a row, easy alignment */
.page { display: grid; }   /* children on a two-dimensional grid */

The next lessons teach each in detail. For now, remember: you switch it on with display on the parent, and the direct children become flex or grid items.

There are also inline-flex and inline-grid, which behave the same inside but sit in a line of text outside.

Other values you will meet

• list-item: the default for li (adds the marker).
• table, table-row, table-cell: make non-table elements act like tables. Rarely needed now.
• contents: the element's box disappears but its children remain. Handy for flattening wrappers, with care for accessibility.

Common mistakes

• Setting width on an inline element and seeing nothing happen.
• Hiding with opacity: 0 and leaving an invisible clickable area.
• Using display: none for content search engines and screen readers should see.
• Turning li into inline and losing its bullet, then being surprised.
• Whitespace gaps between inline-block items; Flexbox avoids this.

Exercise

Make a row of three tags (inline-block) with a light background and rounded corners, and below it a paragraph hidden with display none.

<style>
  .tag { display: inline-block; padding: 4px 12px; margin-right: 6px; background: #e0e7ff; border-radius: 999px; }
  .secret { display: none; }
</style>
<span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JS</span>
<p class="secret">You will not see this.</p>