CssConceptBeginner · 3 min read

What is display inline-block in CSS: Explanation and Example

The display: inline-block CSS property makes an element behave like an inline element but allows it to have block features like width and height. It sits next to other elements on the same line but can be sized and styled like a block.

⚙️

How It Works

Think of inline-block as a hybrid between inline and block elements. Like inline elements (such as <span>), it flows along the same line as other elements, so multiple inline-block elements can sit side by side. But unlike inline elements, it can have a set width and height, just like block elements (such as <div>).

Imagine a row of boxes on a shelf. Inline elements are like small stickers stuck side by side, which you can't resize easily. Block elements are like big boxes stacked vertically, taking full shelf width. Inline-block elements are like small boxes you can place side by side and also resize to your liking.

This makes inline-block very useful when you want elements to line up horizontally but still control their size and spacing.

💻

Example

This example shows three colored boxes using display: inline-block. They sit side by side and each has its own width, height, and margin.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inline-block Example</title>
<style>
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: coral;
    vertical-align: top;
  }
  .box.blue { background-color: lightblue; }
  .box.green { background-color: lightgreen; }
</style>
</head>
<body>
  <div class="box"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
</body>
</html>

Output

Three colored square boxes (coral, light blue, light green) aligned horizontally with space between them.

🎯

When to Use

Use display: inline-block when you want elements to line up horizontally but still control their size, padding, and margin. It is great for navigation menus, button groups, image galleries, or any layout where you want items side by side without using floats or flexbox.

For example, if you want a row of buttons that have the same height and width but appear next to each other, inline-block is a simple and effective choice.

✅

Key Points

Inline-block elements flow inline like text but behave like blocks in size control.
They allow setting width, height, margin, and padding.
Multiple inline-block elements sit side by side on the same line.
They respect vertical alignment, so you can align them with vertical-align.
Useful for horizontal layouts without using flexbox or grid.

✅

Key Takeaways

display: inline-block lets elements sit side by side while controlling size.

It combines inline flow with block-level box properties like width and height.

Use it for horizontal layouts like menus or button groups without floats or flexbox.

Remember to manage vertical alignment with vertical-align if needed.

It is a simple way to create flexible, horizontally aligned elements.