📘 Lesson · Lesson 20

Display: block, inline, none

What display Controls

The display property controls how an element behaves in the page's flow — whether it stacks vertically, sits inline with text, or hides entirely. You met block vs inline in the HTML course (div is block, span is inline); now you learn to CHANGE an element's display behaviour with CSS. This is fundamental: it decides whether elements sit on their own line or flow together, and it's the gateway to the layout tools (flex, grid) coming next.

display: block — full width, own line

div, p, h1, section { display: block; }   /* these are block by DEFAULT */

.make-block { display: block; }   /* force an inline element to be block */

┌───────────────────────────────┐ │ Block element 1 (full width) │ ├───────────────────────────────┤ │ Block element 2 (full width) │ └───────────────────────────────┘ Each starts on a NEW line, stacks vertically

Block elements start on a new line and take the FULL width available, stacking vertically. div, p, headings, section, ul are block by default. You can set width, height, and all margins/padding on them freely. These are your layout building blocks — the big rectangles you arrange into a page. Most structural elements are block.

display: inline — flows within text

span, a, strong, em { display: inline; }   /* inline by DEFAULT */

This paragraph has an inline <a> link and inline <strong> text that flow WITHIN the line, sitting side by side with the surrounding words.

Inline elements flow along with text, taking only as much width as their content — they do NOT start a new line. span, a, strong, em, img are inline. The key limitation: inline elements ignore width and height, and only respect LEFT/RIGHT margins and padding (not top/bottom in the way you'd expect). This is why you sometimes can't size an inline element — and why inline-block exists (next). Inline is for styling bits of text WITHIN a line.

display: inline-block — the best of both

.tag {
    display: inline-block;
    width: 80px;             /* now width WORKS (unlike inline) */
    padding: 8px;            /* full padding works too */
    margin: 5px;
}

inline-block is the useful hybrid: it flows inline (sits side by side, doesn't force a new line) BUT accepts width, height, and all padding/margins like a block. This solves the classic problem where you want several boxes in a row that also have proper sizing — like tags, badges, or buttons. Remember the "links as buttons" chapter? That used display: inline-block so the link (inline) could take full button padding. It's the go-to when you need inline flow with block sizing.

display: none — completely hidden

.hidden { display: none; }   /* element vanishes entirely */

display: none removes an element completely — it disappears and takes up NO space; the page reflows as if it were never there. This is how dropdown menus, popups, and "show more" content are hidden until needed (then JavaScript flips them back to block). Important contrast: visibility: hidden also hides an element but KEEPS its space (leaving a gap), while display: none removes the space too. For truly hiding something, display: none is what you want. This is one of the most-used properties in interactive interfaces.

Exam Corner

Q: Difference between block and inline? Block starts a new line and takes full width; inline flows within text and takes only content width.

Q: Do inline elements respect width and height? No — inline ignores width/height; use inline-block if you need them.

Q: What is inline-block? Flows inline (side by side) but accepts width, height and full padding/margin like a block.

Q: What does display: none do? Hides the element completely, removing it from layout (no space taken).

Q: display: none vs visibility: hidden? none removes the space; hidden keeps the space but makes it invisible.

display क्या Control करता है

display property control करता है element page के flow में कैसे व्यवहार करता है — vertically stack हो, text के साथ inline बैठे, या पूरी तरह छुपे. Block vs inline आप HTML course में मिल चुके (div block, span inline); अब आप CSS से element का display व्यवहार BADALNA सीखते हैं. यह बुनियादी है: यह तय करता है elements अपनी line पर बैठें या साथ बहें, और अगले layout tools (flex, grid) का द्वार है.

display: block — full width, अपनी line

div, p, h1, section { display: block; }   /* ye DEFAULT se block hain */

.make-block { display: block; }   /* inline element ko block banao */

Block elements नई line से शुरू होकर उपलब्ध PURI width लेते हैं, vertically stack होते. div, p, headings, section, ul default रूप से block. इन पर width, height, और सारे margins/padding freely set कर सकते हैं. ये आपके layout building blocks हैं — बड़े rectangles जिन्हें page में सजाते हैं. ज़्यादातर structural elements block हैं.

display: inline — text के अंदर बहता है

span, a, strong, em { display: inline; }   /* DEFAULT se inline */

Is paragraph me inline <a> link aur inline <strong> text hai jo line ke ANDAR behte hain, aas-paas ke shabdon ke saath side by side baithte.

Inline elements text के साथ बहते हैं, सिर्फ अपने content जितनी width लेते — वे नई line शुरू NAHI करते. span, a, strong, em, img inline हैं. मुख्य सीमा: inline elements width और height ignore करते हैं, और सिर्फ LEFT/RIGHT margins और padding respect करते (top/bottom को उस तरह नहीं जैसा आप उम्मीद करें). इसीलिए कभी-कभी inline element size नहीं कर सकते — और इसीलिए inline-block है (अगला). Inline line के ANDAR text के टुकड़े style करने के लिए है.

display: inline-block — दोनों का best

.tag {
    display: inline-block;
    width: 80px;             /* ab width CHALTI hai (inline ke ulat) */
    padding: 8px;            /* poora padding bhi chalta hai */
    margin: 5px;
}

inline-block उपयोगी hybrid है: यह inline बहता है (side by side बैठता, नई line नहीं थोपता) PAR block की तरह width, height, और सारे padding/margins लेता है. यह classic problem हल करता है जहां आप एक row में कई boxes चाहते हैं जिनकी proper sizing भी हो — जैसे tags, badges, या buttons. "links as buttons" chapter याद है? उसने display: inline-block use किया ताकि link (inline) पूरा button padding ले सके. Inline flow के साथ block sizing चाहिए तो यह go-to है.

display: none — पूरी तरह छुपा

.hidden { display: none; }   /* element poori tarah gayab */

display: none element को पूरी तरह हटाता है — यह गायब हो जाता है और KOI space नहीं लेता; page ऐसे reflow होता है जैसे वह कभी था ही नहीं. Dropdown menus, popups, और "show more" content ऐसे ही छुपे रहते हैं ज़रूरत तक (फिर JavaScript उन्हें block में वापस flip करता है). ज़रूरी contrast: visibility: hidden भी element छुपाता है पर उसकी space RAKHTA है (gap छोड़ते), जबकि display: none space भी हटाता है. किसी को सच में छुपाने को display: none चाहिए. यह interactive interfaces की सबसे ज़्यादा use होने वाली properties में से एक है.

Exam Corner

Q: block और inline में अंतर? Block नई line शुरू करके full width लेता है; inline text के अंदर बहता और सिर्फ content width लेता है.

Q: क्या inline elements width और height respect करते हैं? नहीं — inline width/height ignore करता है; चाहिए तो inline-block use कीजिए.

Q: inline-block क्या है? Inline बहता है (side by side) पर block की तरह width, height और पूरा padding/margin लेता है.

Q: display: none क्या करता है? Element को पूरी तरह छुपाता है, layout से हटाते (कोई space नहीं).

Q: display: none vs visibility: hidden? none space हटाता है; hidden space रखता है पर invisible बनाता है.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.