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
🗣 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
🗣 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.
🗣 Hinglish Tip: inline-block ek hybrid hai — line me bhi rehta hai aur shape bhi control kar sakte ho.
