CSS Display Property Explained with Block, Inline, and Inline-Block

Hi everyone!

In this section, we are going to explore one of the most fundamental and powerful CSS tools — the display property. If we’ve ever worked on web layouts, chances are we’ve already encountered it, even if we didn’t realize its full potential. Now, it’s time to dig deeper and understand how this property shapes the layout of every webpage.

By learning how to use the display property properly, we unlock the ability to control how elements behave in a layout — whether we want them to appear in a row, stack vertically, or hide them from view altogether. The display property is what helps us create flexible, clean, and responsive layouts.

Block and Inline Elements in HTML

Before diving into CSS, let’s start with how elements behave by default in HTML. For instance, when using a <p> tag, we’ll notice that it stretches all the way across the container. That’s because it’s a block-level element.

Now let’s say we want a specific word in that paragraph to have a different style, without breaking the line. That’s where inline elements shine. Here’s a quick example:

<p>Hello, <span>Beautiful</span> World</p>

In this case, the <span> tag doesn’t break the flow — the word “Beautiful” stays on the same line. Inline elements stay in line with surrounding content and only occupy the space their content requires.

Recap:

• Block-level elements (like <div>, <p>, <h1>) always start on a new line and take up the full width.

• Inline elements (like <span>, <strong>, <a>) do not start on a new line and stay within the flow of text.

Three Essential CSS Display Values

CSS offers many display values, but these three are foundational:

1. block

2. inline

3. inline-block

Let’s break them down.

display: block

A block-level element:

• Starts on a new line

• Stretches across the entire width of the parent container

• Can be styled using properties like width, height, margin, and padding

Common examples include <div>, <section>, <article>, and <header>.

display: inline

Inline elements:

• Flow alongside other inline elements

• Ignore properties like width and height

• Only occupy space equal to their content

Elements like <span>, <strong>, and <a> are inline by default.

display: inline-block

This is the best of both worlds:

• Appears inline with other elements

• Supports width, height, margin, and padding

It’s perfect for items like buttons, menus, and navigation links that should sit side-by-side but still need custom dimensions.

Practical Example — Changing Layouts with Display

Let’s say we want to create three square boxes that appear side by side. Here’s the CSS:

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  margin: 10px;
}

If the screen is wide enough, the boxes appear in a row. Want them to stack vertically instead? Just change the display value:

.box {
  display: block;
  width: 100%;
}

This small change has a big impact on layout — and that’s exactly the kind of power CSS gives us.

Hiding Elements with CSS

Sometimes we need to temporarily hide elements. That’s where display: none comes in:

.hidden {
  display: none;
}

Unlike visibility: hidden, which only hides the element but leaves its space, display: none removes it entirely from the layout. This is especially useful for:

• Toggling menus

• Form steps

• Mobile navigation

Try It Yourself — Live Demo Playground

Want to practice this yourself? Check out this interactive example: https://css-display.vercel.app/

You’ll be able to:

• Compare block vs inline behavior

• Test inline-block layouts

• Change display styles and observe the results in real-time

Use developer tools in your browser to explore and experiment.

Also, try the mini-challenge in the 8.0 CSS Display project. Your task:

1. Make three boxes display side by side

2. Then stack them vertically

Just by updating one property — the layout changes completely.

Why the Display Property Is So Important

If we’re serious about web design, then mastering the display property is essential. It’s the building block of all layouts. Whether we’re creating a landing page, a portfolio, or an entire web app — understanding display behavior helps us:

• Fix common layout issues

• Manage spacing effectively

• Structure content with clarity

This foundation will also prepare us for more advanced layout systems like Flexbox and Grid, which we’ll explore soon.

So take your time to experiment with different display values. Observe how they behave across devices and browsers. Mastery here means smoother development later.

Keep building and see you in the next section!

Baca juga