display in CSS - What's the Difference Between block, inline, and none?

The display property is one of the most important layout properties in CSS. It controls how an element behaves: does it take a full line, sit inline, or disappear completely?

If you are looking for display in CSS, the difference between block and inline, or display none vs visibility hidden, this lesson explains it step by step.

What Is display in CSS?

Every HTML element has a default display behavior. The display property lets you change that behavior.

Simple definition: display in CSS defines how an element is shown and positioned relative to other elements.

Main display Values in CSS

1) display: block

The element takes the full width of the line and starts on a new line. Examples: div, p, h1.

.item {
    display: block;
}

Expected result: each element appears on its own line.

2) display: inline

The element takes only the width of its content and sits next to others. Examples: span, a.

.item {
    display: inline;
}

Expected result: elements appear on the same line as long as space is available.

3) display: none

Hides the element completely and removes it from the page flow (no space left behind).

.hidden {
    display: none;
}

Expected result: the element does not appear at all.

display: none vs visibility: hidden

.a { display: none; }
.b { visibility: hidden; }

What does this code do? The first removes the element from flow, the second hides it but keeps its space.

Common mistake: using visibility hidden when you want the element fully removed from layout.

Changing the Default Display Behavior

You can turn an inline element into a block element to use width, height, and padding easily.

a.menu-link {
    display: block;
    width: 220px;
    background: #e2e8f0;
    padding: 10px;
}

What does this code do? It turns a link into a full block that can be styled like a card.

Expected result: the link becomes easier to click and more visually clear.

Common mistake: expecting width to work on inline elements without changing display.

Common Mistakes with display in CSS

1) Using inline with width/height: often does not work as expected.

2) Hiding an important element with display: none: can hurt UX or interactivity.

3) Mixing block and inline without understanding: leads to messy layouts.

FAQ - Common Search Questions

What is the difference between block and inline in CSS?

Block takes the full line, inline only takes the content width.

How do I hide an element in CSS?

Use display: none; if you want it removed from layout.

What is the difference between display: none and visibility: hidden?

display: none removes the element and its space, visibility: hidden hides the element but keeps its space.

Why does width not work on a span in CSS?

Because span is inline by default. Change it to display: inline-block or block.

Does display affect element order on the page?

Yes, directly, because it determines how the element participates in the page flow.