HTML Block vs Inline Elements में क्या अंतर है
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
हर HTML element या तो block-level होता है या inline। अंतर सरल है लेकिन बुनियादी: block element हमेशा नई line से शुरू होता है और उपलब्ध पूरी चौड़ाई लेता है। Inline element उतनी ही चौड़ाई लेता है जितनी उसे चाहिए, और अपने पड़ोसियों के साथ उसी line में बैठता है।
Block-level elements — ब्लॉक एलिमेंट्स
आम block elements: <div>, <p>, <h1>–<h6>, <ul>, <li>, <table>, <form>, <section>। Block element एक के नीचे एक, लंबवत जमते हैं — जब तक आप CSS से उसे न बदलें।
Inline elements — इनलाइन एलिमेंट्स
आम inline elements: <span>, <a>, <strong>, <em>, <img>, <input>, <button>। Inline elements text की line के अंदर बहते हैं, जैसे वाक्य में शब्द। आप एक row में पाँच links रख सकते हैं और वे साथ-साथ बैठेंगे।
यह क्यों मायने रखता है
इससे दो नियम निकलते हैं: block element में inline elements और दूसरे block elements हो सकते हैं, लेकिन inline element में सिर्फ दूसरे inline elements (और text) होने चाहिए। और आप inline element पर सीधे width या height नहीं लगा सकते — CSS उसे तब तक नज़रअंदाज़ करता है जब तक आप element की display को block या inline-block न बदल दें।
<div> सामान्य block container है और <span> सामान्य inline container है। उनका अपना कोई अर्थ नहीं है — वे इसलिए हैं ताकि आप चीज़ों को styling के लिए group कर सकें। जब कोई और खास tag न जँचे, तब उनका इस्तेमाल करें।"block" और "inline" का क्या मतलब है
हर HTML element या तो block-level होता है या inline। Block-level element नई line से शुरू होता है और अपने parent की पूरी चौड़ाई लेता है — जैसे एक ईंट जो पूरी row भर दे। Paragraph, heading और <div> block-level हैं। Inline element text की line के अंदर बैठता है और उतनी ही चौड़ाई लेता है जितनी उसे चाहिए — जैसे वाक्य में एक शब्द। Link, <span> और <strong> inline हैं।
याद रखने की तरकीब: block = पूरी लाइन लेता है, inline = लाइन के अंदर रहता है।
Block बनाम inline
| Block-level | Value | विवरण |
|---|---|---|
<div>, <p>, <h1>–<h6> | — | नई line से शुरू होते हैं, पूरी चौड़ाई। |
<ul>, <ol>, <table> | — | नई line से शुरू होते हैं, पूरी चौड़ाई। |
<span>, <a>, <strong> | — | Inline: line के अंदर रहते हैं, सिर्फ उतने चौड़े जितना उनका content। |
<img>, <input> | — | Inline, लेकिन तय width और height के साथ — एक खास मामला। |
देखें, यहाँ क्या होता है। Paragraph block-level है, इसलिए वह नई line से शुरू होता है। Span inline है, इसलिए वह वाक्य के अंदर रहता है:
<p>This is a paragraph.</p> <p>This has a <span style="color: red;">red word</span> inside it.</p>
display: inline; div को शब्द जैसा व्यवहार कराता है, और display: block; span को नई line से शुरू कराता है। Block/inline का बँटवारा डिफ़ॉल्ट व्यवहार है, पक्का नियम नहीं।आम गलतियाँ
<p>के अंदर block element (जैसे<div>) रखना — browser paragraph को जल्दी बंद कर देता है और layout टूट जाता है।<a>के अंदर block element रखना — पुराने HTML में यह गलत था; HTML5 में यह मान्य है, लेकिन सीखते समय इसे सरल रखें।- Inline element पर width लगाना और हैरान होना कि कुछ नहीं हुआ — width सिर्फ block elements (और inline-block) पर काम करती है।
- एक ही शब्द के लिए
<div>इस्तेमाल करना — वह<span>का काम है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Block and Inline</title>
</head>
<body>
<div style="background: #ffe0cc;">This div is a block — it takes the full width.</div>
<div style="background: #cce5ff;">This div starts on a new line.</div>
<p>This is a paragraph with <span style="color: red;">a red span inside it</span> — the span stays in the same line.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. ब्लॉक और इनलाइन एलिमेंट में क्या अंतर है?
ब्लॉक एलिमेंट नई लाइन से शुरू होता है और पूरी चौड़ाई लेता है, जबकि इनलाइन एलिमेंट सिर्फ़ ज़रूरत भर चौड़ाई लेता है और उसी लाइन में रहता है।
2. क्या इनलाइन एलिमेंट पर width लगा सकते हैं?
नहीं, CSS इनलाइन एलिमेंट की width को तब तक नज़रअंदाज़ करता है जब तक उसका display block या inline-block न कर दिया जाए।
3. div और span किस काम आते हैं?
div सामान्य ब्लॉक कंटेनर है और span सामान्य इनलाइन कंटेनर है; जब कोई खास टैग न हो, तब चीज़ों को स्टाइल के लिए समूहबद्ध करने में इनका इस्तेमाल होता है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
