🧱 CSS Display Property (Block, Inline & Inline-Block)

Last Updated: November 2025

The display property in CSS defines how an element behaves — whether it starts on a new line, how much width it takes, and if height/width can be applied.

Syntax

selector {
  display: value;
}

Common values:

block
inline
inline-block

🗣 Hinglish Tip: display batata hai element page pe kaise dikhega — line me ya alag block me.

🧩 1. Block Elements

Block elements start on a new line and take up the full width available.

Examples: <div>, <p>, <h1>–<h6>, <section>

div {
  display: block;
  width: 300px;
  height: 100px;
  background-color: lightcoral;
}

Characteristics:

Starts on a new line
Can set width, height, margin, padding
Takes full width of parent container by default

Property	Effect
display: block;	Makes an element behave like a block
Example elements	<div>, <p>, <section>

🗣 Hinglish Tip: Block element poori line le leta hai, chahe andar thoda content hi kyu na ho.

🧱 2. Inline Elements

Inline elements do not start a new line and only take up as much width as their content needs.

Examples: <span>, <a>, <strong>, <em>

span {
  display: inline;
  background-color: lightgreen;
  width: 200px; /* ❌ ignored */
  height: 50px; /* ❌ ignored */
}

Characteristics:

Stays on the same line as others
Cannot set width or height
Margins/paddings work horizontally, not vertically

Property	Effect
display: inline;	Keeps element in the same line
Example elements	<a>, <span>, <strong>

🗣 Hinglish Tip: Inline element line todta nahi, content ke size ke hisaab se chhota hota hai.

🧩 3. Inline-Block Elements

inline-block is a mix of inline and block:

It stays in the same line (like inline)
But you can set width and height (like block)

button {
  display: inline-block;
  width: 150px;
  height: 40px;
  background-color: skyblue;
  margin: 5px;
}

Characteristics:

Doesn’t break line
Can apply width, height, margin, padding
Commonly used for buttons, nav items, badges, etc.

Property	Effect
display: inline-block;	Allows block styling while staying inline
Example elements	<button>, custom styled <a>

🗣 Hinglish Tip: inline-block ek hybrid hai — line me bhi rehta hai aur shape bhi control kar sakte ho.

← Previous Next →