The Display Property: Block, Inline, and Inline-Block

If you’ve ever wondered why some elements start on a new line and others sit side by side, you’re in the right place. In this article, you’ll learn how the CSS display property works, focusing on three common values: block, inline, and inline-block.

By the end, you’ll be able to:

Control whether elements stack or sit next to each other
Change the size of elements reliably
Create simple layouts using just a few lines of CSS

No previous coding experience is required. We’ll go step by step, with small, hands-on examples you can copy, paste, and play with.

What is the `display` property?

In CSS, the display property tells the browser how an element should behave on the page. Think of it as the element’s “layout personality”.

We’ll focus on three main types:

display: block; – Elements act like big boxes that take up the full width
display: inline; – Elements stay in line with text and do not break onto a new line
display: inline-block; – A mix of both: sit in a line and behave like boxes you can size

You’ll see these used all the time when styling buttons, menus, images, and page layouts.

Getting set up (super simple)

To follow along, you only need:

A text editor (Notepad, VS Code, or any simple editor)
A web browser (Chrome, Firefox, Edge, etc.)

Create a new file called display-demo.html and add this starter code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Display Demo</title>
  <style>
    /* We'll add CSS here in each example */
  </style>
</head>
<body>
  <!-- We'll add HTML here in each example -->
</body>
</html>

Save the file and open it in your browser by double-clicking it. Keep this file open—you’ll edit it for each example.

1. `display: block` – The default big box

Block elements are like full-width boxes. They:

Always start on a new line
Stretch as wide as they can (by default)
Respect width, height, margin, and padding

Common block elements include: <div>, <p>, <h1>–<h6>, <ul>, <li>.

Example 1: Understanding block elements

Replace the <body> in your file with this:

<body>
  <div class="box box-one">Box 1</div>
  <div class="box box-two">Box 2</div>
  <p>This is a paragraph of text.</p>
</body>

Now add this CSS inside the <style> tag:

.box {
  /* All .box elements are block by default because they're divs */
  background-color: lightblue;
  border: 2px solid blue;
  margin-bottom: 10px; /* Space under each box */
  padding: 10px;       /* Space inside the box */
}

.box-one {
  height: 50px;
}

.box-two {
  height: 80px;
}

What you should see:

“Box 1” appears at the top, taking the full width (left to right)
“Box 2” appears under Box 1
Then the paragraph appears under Box 2

Each <div> behaves like a big box on its own line. That’s the key idea of display: block.

Try it yourself: Change height or padding values and refresh the page. Notice how block elements easily change size.

2. `display: inline` – Staying in the text flow

Inline elements stay in line with text. They:

Do not start on a new line
Only take up as much space as they need
Ignore width and height (those don’t work on inline elements)

Common inline elements: <span>, <a>, <strong>, <em>.

Example 2: Turning blocks into inline elements

Update your <body> to this:

<body>
  <div class="inline-box">Inline Box 1</div>
  <div class="inline-box">Inline Box 2</div>
  <div class="inline-box">Inline Box 3</div>
</body>

Replace the CSS in <style> with:

.inline-box {
  display: inline;              /* Make the div behave like inline text */
  background-color: pink;
  border: 2px solid red;
  padding: 5px;                 /* Works for inline elements */
  margin-right: 10px;           /* Right margin works horizontally */
  width: 200px;                 /* This will be ignored */
  height: 50px;                 /* This will be ignored */
}

What you should see:

“Inline Box 1”, “Inline Box 2”, and “Inline Box 3” appear on the same line (if your screen is wide enough)
They sit next to each other like words in a sentence
Even though we set width and height, they don’t change size

This is the key limitation of display: inline: You can’t control width and height. The element shrinks or grows just enough to fit its content.

Try it yourself:

Add more text inside one of the boxes and refresh
See how that box becomes longer, while the others stay the same

3. `display: inline-block` – The best of both worlds

inline-block is a very useful middle ground. Elements:

Sit next to each other like inline elements
Respect width, height, margin, and padding like block elements

You’ll use inline-block a lot for buttons, navigation menus, and small boxes.

Example 3: Using inline-block for flexible boxes

Update your <body> to:

<body>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</body>

Replace the CSS with:

.card {
  display: inline-block;    /* Behaves like both inline and block */
  background-color: lightgreen;
  border: 2px solid green;
  width: 120px;             /* Now width works! */
  height: 80px;             /* Now height works! */
  margin: 5px;              /* Space around each card */
  text-align: center;       /* Center the text inside the card */
  line-height: 80px;        /* Vertically center the text (simple trick) */
}

What you should see:

Three green “cards” sitting side by side
Each has the same size (width and height)
There’s a small gap between them, thanks to margin

This is inline-block in action: controlled size and inline layout.

Try it yourself:

Change width to 200px and see the cards get wider
Add a fourth .card and watch it join the same row (or wrap to the next line if there’s not enough space)

4. Mixing block, inline, and inline-block

Now let’s combine the three types in a small, realistic example. We’ll build a simple “profile card” layout with a title, image placeholder, and buttons.

Example 4: A simple profile card layout

Update your <body> to this:

<body>
  <div class="profile-card">
    <h2 class="profile-title">Jane Doe</h2>
    <div class="profile-image">IMG</div>
    <div class="profile-actions">
      <a href="#" class="btn">Follow</a>
      <a href="#" class="btn">Message</a>
    </div>
  </div>
</body>

Replace the CSS with:

/* The outer container is a block element */
.profile-card {
  display: block;              /* Default for div, but shown for clarity */
  width: 260px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

/* Title is block by default, so it sits on its own line */
.profile-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

/* Image placeholder as a block box */
.profile-image {
  display: block;
  width: 100%;
  height: 120px;
  background-color: #eee;
  border-radius: 4px;
  text-align: center;
  line-height: 120px;
  margin-bottom: 10px;
}

/* Container for the buttons */
.profile-actions {
  text-align: center;  /* Center the inline-block buttons */
}

/* Buttons as inline-block elements */
.btn {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 5px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.btn:hover {
  background-color: #0056b3;  /* Darker on hover */
}

What you should see:

A card with “Jane Doe” at the top
A gray box labeled “IMG” in the middle
Two blue buttons (“Follow” and “Message”) centered at the bottom

Here’s how display is working:

.profile-card is block, so it’s a big box on its own line
.profile-title and .profile-image are also block-level, stacking vertically
.btn elements are inline-block, so they sit side by side and can be sized and padded like boxes

Try it yourself:

Add a third button: <a href="#" class="btn">More</a>
Increase padding on .btn to make the buttons look larger

You’ve just built a simple layout using only display and a few other basic properties.

Quick recap: Block vs Inline vs Inline-Block

Here are the key differences:

Block (display: block;)
- Starts on a new line
- Takes full available width by default
- Respects width, height, margin, padding
Inline (display: inline;)
- Stays in line with text
- Only as wide as its content
- Ignores width and height; padding and margin work mainly left/right
Inline-block (display: inline-block;)
- Sits in line with other elements
- Respects width, height, margin, padding
- Great for buttons, small cards, and menus

What’s next?

You’ve taken an important step toward understanding CSS layouts. Knowing how display works will make everything else—like flexbox and grid—much easier to learn later.

To keep practicing:

Experiment with changing display on different elements
Try turning a list of links into an inline-block navigation menu
Play with width, margin, and padding to see how they affect each display type

Learning to code takes time and patience, but every small experiment builds your skills. You’ve already learned a powerful tool—keep exploring, and it will soon feel natural.

Mudzinga