HTML & CSS - Mastery / Layout Fundamentals

CSS Display Property: Block, Inline, Inline-Block

🧐 Display Properties

Just like clothes define how we look, the display property defines how HTML elements appear on a webpage.

It tells the browser how to place elements — whether side-by-side or one below another.

🧱 display: block

  • Think of it like a brick — big, solid, and always on its own line.

  • Takes the full width available, even if the content is small.

  • Always starts on a new line.

  • Examples of block elements by default:

  • <div>, <h1>, <p>, <section>

✏️ display: inline

  • This one is like words in a sentence — they sit next to each other.

  • Only takes as much space as needed.

  • Cannot set height and width.

  • Examples of inline elements by default:

  • <span>, <a>, <b>, <strong>

📦 display: inline-block

  • Best of both worlds 🌍

  • Sits next to others like inline

  • But you can control width and height like block

Use Case: Great for buttons, cards, or small boxes that need styling.

✏️ display: none

  • Completely hides the element from the page.

  • The element takes up no space and is not visible.

  • Unlike visibility: hidden, it removes the element from the document flow.

  • Useful for toggling content or hiding elements temporarily.

  • Note: Hidden elements are not accessible by keyboard or screen readers unless handled specially.

🗂️ Comparison Table:

Property

Starts on New Line

Width/Height Control

Sits Inline?

block

✅ Yes

✅ Yes

❌ No

inline

❌ No

❌ No

✅ Yes

inline-block

❌ No

✅ Yes

✅ Yes

none

❌ No

❌ No

❌ No

💭 Real-Life Example:

Imagine writing a letter:

block elements are like paragraphs – always on a new line.

inline elements are like words – flow with the text.

inline-block is like a label or sticker in your notebook – it's inline but has its own size.

A none element is like hiding the content with a whitener.