Display & Visibility

Before an element can be colored, sized, or positioned, the browser has to decide what kind of box it even is. The display property is that decision, and it changes more about an element's behavior than almost any other single property.

block: full width, own line

Elements like <div>, <p>, and headings are block by default. A block box stretches to fill the width of its container and forces whatever comes after it onto a new line — it respects width, height, and both vertical and horizontal margin:

inline: only as wide as its content

Elements like <span>, <a>, and <strong> are inline by default. An inline box only takes up as much width as its content needs, sits in the middle of a line of text, and ignores width, height, and top/bottom margin entirely — setting them has no visible effect:

Try raising the width value in the example above — nothing happens, because a plain inline box won't ever be wider than its own text.

inline-block: the middle ground

inline-block keeps an element sitting in line with surrounding text like inline does, but lets you set width, height, and margin on all four sides like block does. It's the setting you reach for when you want something like a button or a badge to sit inline but still have real dimensions:

display: none vs. visibility: hidden

These two both make something disappear, but they disagree on whether the space it used to occupy disappears too. display: none removes the element from the layout completely — everything around it closes the gap, as if it were never in the document at all:

visibility: hidden, on the other hand, just makes the element invisible while leaving its space reserved — everything else stays exactly where it was: