What is the CSS display property?

The display property controls how an element participates in layout — whether it behaves as a block, flows inline, lays out its children with flexbox or grid, or vanishes entirely.

It is the property that lets you override an element's default block/inline nature and opt into layout systems. The values you meet first:

A very common use is making an anchor look and behave like a button by giving it inline-block so padding actually takes effect:

a.button {
    display: inline-block;
    padding: 10px 20px;
}

One subtlety to remember is the difference between hiding methods:

• display: none removes the element from the layout completely — it takes up no space, as if deleted.
• visibility: hidden keeps the element's space reserved but makes it invisible.

Choose between them based on whether the surrounding layout should close up the gap.

Go deeper:

• CSS display (MDN) — the full set of display values and how each generates a different kind of layout box.