CSS — Display

One property, new personality

Every HTML element arrives with a default display (block or inline). CSS can change it on any element:

li { display: inline; }     /* list items in a row */
a  { display: block; }      /* links filling their line */

The four values that matter most

block

Full width, stacks vertically, accepts width/height/margins:

.nav-link {
    display: block;
    padding: 12px;       /* entire row becomes clickable */
}

inline

Flows inside text; ignores width/height, vertical margins:

.tag {
    display: inline;
    background: #e0f2f1;
}

inline-block

The hybrid — flows side by side and respects sizing:

.chip {
    display: inline-block;
    width: auto;
    padding: 4px 12px;
    background: teal;
    color: white;
    border-radius: 999px;
}

(Multiple chips sit side by side, each sized by its padding — impossible with pure inline.)

none — remove entirely

.mobile-only { display: none; }

Element vanishes from layout and from screen readers. Contrast with visibility: hidden, which keeps the space but hides the paint:

	Space kept?	In DOM?
display: none	No	Yes
visibility: hidden	Yes	Yes

The classic pattern: horizontal nav from a list

<style>
    ul.menu  { list-style: none; padding: 0; }
    ul.menu li { display: inline-block; }
    ul.menu a  {
        display: block;
        padding: 10px 16px;
        text-decoration: none;
        color: #333;
    }
    ul.menu a:hover { background: #e6fffa; color: #0d9488; }
</style>

<ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

What the browser displays

(A clean horizontal menu: three labeled items in a row, each with hover highlighting.)

Three display decisions turn semantic HTML into UI: inline-block on <li>, block on <a> (full-cell clicks), plus padding.

Hiding/showing with JavaScript

The standard toggle:

modal.style.display = "block";   // show
modal.style.display = "none";    // hide

Or the class-based way (cleaner):

.hidden { display: none !important; }

dialog.classList.add("hidden");    // hide
dialog.classList.remove("hidden"); // show

Modern values worth knowing

Flexbox and Grid are also display values:

.cards { display: flex; }   /* children laid out in a row */
.grid  { display: grid; }   /* children into columns/rows */

They have their own lessons coming — just recognize them as display values when you meet them.

Mini Practice

1. Build the horizontal menu above from scratch
2. Make chips/badges with inline-block; add five in a wrapping row
3. Toggle an alert box via classList.add/remove("hidden")
4. Compare display:none vs visibility:hidden on the same element
5. Turn a definition list sideways using inline-block on <dt>/<dd>

Next: max-width →