CSS Fundamentals

CSS Display

⏱ 8 min read📖 Beginner

The display property controls how an element is placed in the page layout — whether it takes up the full width and stacks on a new line, sits inline with surrounding content, or disappears entirely.

#logo {
  display: inline-block;
}

.hidden {
  display: none;
}

Let me ask you something.

Have you ever wondered why some elements automatically stack on top of each other while others sit side by side? Why does a paragraph always take up the full width of the page even if it only has a few words in it? Why does a bold tag inside a sentence not push everything else onto a new line?

That behavior is controlled by the display property. And understanding it is one of the most important steps toward actually being able to build layouts in CSS.

How Elements Behave by Default

Every HTML element has a default display value. You did not set it. The browser just applies it automatically.

Most elements fall into one of two categories.

Block elements take up the full width available and always start on a new line. The next element after them gets pushed down below.

Inline elements only take up as much space as their content needs. They sit inside the flow of text without breaking onto a new line.

Here is what that looks like in practice.

The paragraphs stack on top of each other and stretch the full width. The spans sit right next to each other only taking up as much space as their text.

That is block vs inline behavior. And you can change it on any element using the display property.

display: block

Setting display: block on an element makes it behave like a block element. It takes up the full width and pushes the next element below it.

The first span now behaves like a paragraph. It takes up the full line and pushes the second span below it even though spans are normally inline.

display: inline

Setting display: inline makes a block element behave like an inline one. It shrinks to fit its content and sits inside the flow of text.

The paragraphs now sit side by side like words in a sentence instead of stacking.

One important thing about inline elements — you cannot set a width or height on them. They just take up as much space as their content needs and that is it. If you try to set a width on an inline element nothing will happen.

💡

This is one of the most common points of confusion for beginners. You add a width to something and nothing changes. Almost always the reason is the element is set to display: inline. Switch it to inline-block or block and your width will work immediately.

display: inline-block

This is the best of both worlds. An inline-block element sits in the flow like an inline element — so it does not break onto a new line — but you can still set a width and height on it like a block element.

Both buttons sit side by side and they both have a fixed width. That is inline-block doing its job.

💡

Buttons and navigation links are the most common places you will use inline-block. They need to sit side by side but they also need a defined size. inline-block gives you both.

display: none

This one is simple but powerful. Setting display: none makes an element completely disappear. It is not just invisible — it is removed from the layout entirely. The space it would have taken up disappears too.

The second paragraph is completely gone. The third paragraph moves up to fill the space as if the second one never existed.

You will use display: none constantly when building interactive components with JavaScript — showing and hiding menus, modals, dropdowns, and notifications.

💡

There is an important difference between display: none and visibility: hidden. Both make an element invisible but display: none removes it from the layout entirely so other elements move to fill the space. visibility: hidden keeps the element invisible but it still takes up its space in the layout leaving a blank gap. In most cases display: none is what you want.

Common Block and Inline Elements

It is worth knowing which elements are block and which are inline by default so you know what you are working with.

Block by default — div, p, h1 through h6, section, article, header, footer, nav, form, ul, ol, li

Inline by default — span, a, strong, em, img, button, input, label

Building the Netflix Clone

Now that we understand display let us start organizing our Netflix clone properly. The logo and Sign In button should sit on the same line at the top — the logo on the left and the button on the right. That requires them to be in the same container and laid out side by side.

We will use a div with a class of navbar to wrap them together.

The page is starting to take real shape now. The navbar and hero sections are separated. The logo and sign in button are both inline-block so they sit on the same line. In the next lesson we will use Flexbox to push the logo to the left and the button to the right properly.

In the next lesson I am going to show you width and height — how to control the exact size of any element on your page and the difference between fixed sizes and flexible ones. Come on in.

Learn about Width and Height →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.