CSS Display

Every HTML element has a display value. It decides how the element shows up on the page: does it take a whole line for itself, or does it sit beside other elements? Does it take up space at all? The display property lets you change that behaviour.

Diagram — see how it fits together

Two elements you already know show the difference clearly. A <div> is a block — it stretches across the full width and pushes the next thing onto a new line. A <span> is inline — it is only as wide as its own text and sits inside a line. Same page, same CSS, completely different behaviour.

Block — a full line of its own

A block element starts on a new line and takes the full width of its parent. Headings, paragraphs, lists and divs are block by default. You can set their width and height, and add margins on all four sides. This is the normal behaviour for the big building blocks of a page.

Inline — part of a line

An inline element does not start a new line. It sits inside the flow of text, only as wide as its content. Links and spans are inline by default. Here is the catch beginners hit most: width and height do not work on inline elements, and top and bottom margins are ignored. If you set a width on a <span> and nothing happens, this is why.

Inline-block — the best of both

inline-block is the middle ground. The element sits in a line beside others, like an inline element — but width, height and margins all work, like a block element. This is the classic way to build a horizontal menu: each link is a small block, and the blocks sit side by side.

None — gone completely

display: none removes the element from the page entirely. It is not just invisible — it takes up no space at all, and the other elements close up around it. This is how menus, popups and extra sections are hidden until they are needed.

Visibility — hidden, but the space stays

visibility: hidden also hides an element, but with one big difference: the empty space stays exactly where the element was. The layout does not shift. Use display: none when you want the element gone, and visibility: hidden when you want it hidden but the page to keep its shape.

Syntax — the display values

.menu-link {
  display: inline-block;
  width: 120px;
  padding: 10px;
  text-align: center;
}
.hidden-box {
  display: none;
}
.kept-space {
  visibility: hidden;
}

Common mistakes

• Setting width or height on an inline <span> or <a> and wondering why nothing changes.
• Using display: none when you meant visibility: hidden, so the whole layout jumps when the element disappears.
• Forgetting that a block element always starts on a new line, even if there is room beside it.
• Hiding something with display: none and expecting it to still be clickable or readable.
• Adding display: block to a link to make the whole box clickable, then forgetting to also give it padding.

Remember

• Block takes a full line and accepts width and height; inline sits inside a line and does not.
• Inline-block sits in a line but still accepts width, height and margins.
• display: none removes the element and its space; visibility: hidden hides it but keeps the space.
• Use inline-block for simple horizontal menus and button rows.
• If a width or height seems to do nothing, check the element's display value first.

Example explained

• .menu a { display: inline-block; } — each menu link becomes a small block that still sits in a line, so the four links sit side by side.
• .menu a { width: 110px; padding: 10px; } — width and padding work here only because the links are inline-block; on plain inline links they would be ignored.
• .menu a:hover { background-color: #1d4ed8; color: white; } — the link under the mouse turns blue, so the visitor can see what they are about to click.
• .hidden-note { display: none; } — this box is removed from the page completely; the text below moves up to fill the gap.
• .kept-space { visibility: hidden; } — this box is invisible, but its empty space stays exactly where it was, so the layout does not shift.
• .notice { display: block; } — the notice is a block, so it starts on a new line and stretches across the full width of the page.