0
0
CSSmarkup~5 mins

Block vs inline vs inline-block in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

These three display types control how elements appear and behave on a webpage. Knowing the difference helps you arrange content clearly and nicely.

When you want an element to take up the full width and start on a new line (like paragraphs).
When you want text or small elements to flow inside a line without breaking it (like links or spans).
When you want elements to sit side by side but still keep block features like width and height (like buttons or images).
Syntax
CSS
selector {
  display: block | inline | inline-block;
}

block makes the element a block box.

inline makes the element flow inside text.

inline-block makes the element flow inline but behave like a block box.

Examples
Paragraphs are block by default, so they start on a new line and take full width.
CSS
p {
  display: block;
}
Links are inline by default, so they flow inside text without line breaks.
CSS
a {
  display: inline;
}
Buttons can sit side by side but have set width and height.
CSS
button {
  display: inline-block;
  width: 8rem;
  height: 2.5rem;
}
Sample Program

This page shows three types of display:

  • Block element takes full width and starts on a new line.
  • Inline elements flow inside text on the same line.
  • Inline-block elements sit side by side but keep block features like width and height.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Block vs Inline vs Inline-block</title>
  <style>
    .block {
      display: block;
      background-color: #a0d8f0;
      margin-bottom: 0.5rem;
      padding: 0.5rem;
    }
    .inline {
      display: inline;
      background-color: #f0c0a0;
      padding: 0.5rem;
    }
    .inline-block {
      display: inline-block;
      background-color: #a0f0c0;
      width: 8rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      margin-right: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="block">I am block - full width, new line</div>
  <span class="inline">I am inline - flow inside text</span>
  <span class="inline">I am also inline</span>
  <br />
  <div>
    <div class="inline-block">Inline-block 1</div>
    <div class="inline-block">Inline-block 2</div>
    <div class="inline-block">Inline-block 3</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Block elements always start on a new line and take full width by default.

Inline elements do not accept width or height properties.

Inline-block elements combine inline flow with block box features like width and height.

Summary

Block: New line, full width.

Inline: Flows inside text, no width/height.

Inline-block: Side by side, can set size.