27:57
CSS Display Property in Depth: Understanding Inline, Block, and Inline-Block || Episode - 16
CodeHelp - by Babbar
Overview
यह वीडियो CSS डिस्प्ले प्रॉपर्टी के बारे में गहराई से बताता है, जिसमें इनलाइन, ब्लॉक और इनलाइन-ब्लॉक जैसे मुख्य प्रकारों पर ध्यान केंद्रित किया गया है। यह समझाता है कि ये प्रॉपर्टीज़ वेब पेज पर एलिमेंट्स को कैसे रेंडर करती हैं, उनके व्यवहार में अंतर, और कैसे उन्हें कस्टम विड्थ, हाइट, मार्जिन और पैडिंग के साथ इस्तेमाल किया जा सकता है। वीडियो में बॉक्स-साइजिंग: बॉर्डर-बॉक्स की भी चर्चा की गई है और यह कैसे एलिमेंट्स के साइज़ को प्रभावित करता है। यह प्रैक्टिकल कोड उदाहरणों के साथ इन कॉन्सेप्ट्स को स्पष्ट करता है, जिससे लर्नर्स को UI बनाने में मदद मिलती है।
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- डिस्प्ले प्रॉपर्टी यह निर्धारित करती है कि कोई एलिमेंट वेब पेज पर कैसे रेंडर या विज़िबल होगा।
- विभिन्न HTML एलिमेंट्स (जैसे div, p, a, span) का डिफ़ॉल्ट डिस्प्ले बिहेवियर होता है।
- डिस्प्ले प्रॉपर्टी का उपयोग करके हम एलिमेंट के रेंडरिंग व्यवहार को बदल सकते हैं।
- मुख्य डिस्प्ले वैल्यूज़ में इनलाइन, ब्लॉक, इनलाइन-ब्लॉक और नन शामिल हैं।
यह समझना महत्वपूर्ण है क्योंकि डिस्प्ले प्रॉपर्टी लेआउट और एलिमेंट इंटरैक्शन का आधार है, जिससे आप अपनी वेबसाइट का स्ट्रक्चर और डिज़ाइन कंट्रोल कर पाते हैं।
जैसे एक आदमी को 'बल्की' (ब्लॉक) या 'पतला' (इनलाइन) दिखाना, यह डिस्प्ले प्रॉपर्टी के प्रभाव को दर्शाता है।
- ब्लॉक एलिमेंट्स हमेशा एक नई लाइन पर शुरू होते हैं।
- वे उपलब्ध पूरी चौड़ाई (full width) लेते हैं, लेफ्ट से राइट तक।
- ब्लॉक एलिमेंट्स कस्टम विड्थ और हाइट को सपोर्ट करते हैं।
- वे चारों दिशाओं (top, bottom, left, right) में मार्जिन और पैडिंग को सपोर्ट करते हैं।
ब्लॉक एलिमेंट्स पेज के स्ट्रक्चरल कंपोनेंट्स बनाने के लिए फंडामेंटल हैं, जैसे सेक्शन, पैराग्राफ और हेडिंग, जो लेआउट को व्यवस्थित करते हैं।
Div और Paragraph टैग्स ब्लॉक एलिमेंट्स के उदाहरण हैं जो हमेशा नई लाइन पर दिखाई देते हैं और पूरी चौड़ाई लेते हैं।
- डिफ़ॉल्ट रूप से (बॉक्स-साइजिंग के बिना), पैडिंग और बॉर्डर जोड़ने पर एलिमेंट की कुल चौड़ाई बढ़ जाती है।
- बॉक्स-साइजिंग: बॉर्डर-बॉक्स सेट करने से पैडिंग और बॉर्डर एलिमेंट की निर्धारित विड्थ और हाइट के अंदर ही शामिल हो जाते हैं।
- यह एलिमेंट के साइज़ को प्रेडिक्टेबल बनाता है, खासकर जब पैडिंग और बॉर्डर का उपयोग किया जाता है।
- यह एक अच्छी प्रैक्टिस मानी जाती है क्योंकि यह लेआउट को मैनेज करना आसान बनाती है।
यह प्रॉपर्टी लेआउट को अधिक कंसिस्टेंट और प्रेडिक्टेबल बनाती है, जिससे मार्जिन और पैडिंग जोड़ने पर एलिमेंट के साइज़ में अनपेक्षित बदलाव नहीं होते।
जब 300px विड्थ वाले बॉक्स में 20px पैडिंग जोड़ी जाती है, तो बॉक्स-साइजिंग: बॉर्डर-बॉक्स के बिना कुल विड्थ 340px हो जाती है, जबकि बॉर्डर-बॉक्स के साथ यह 300px ही रहती है।
- इनलाइन एलिमेंट्स नई लाइन पर शुरू नहीं होते; वे उपलब्ध स्पेस में उसी लाइन में रहते हैं।
- इनकी विड्थ कंटेंट के अनुसार ही होती है, पूरी उपलब्ध चौड़ाई नहीं लेते।
- कस्टम विड्थ और हाइट इनलाइन एलिमेंट्स पर लागू नहीं होती।
- केवल हॉरिजॉन्टल (left, right) मार्जिन और पैडिंग लागू होते हैं; वर्टिकल (top, bottom) मार्जिन का असर नहीं दिखता।
इनलाइन एलिमेंट्स टेक्स्ट के भीतर छोटे हिस्सों को स्टाइल करने या लिंक बनाने के लिए उपयोगी होते हैं, बिना लेआउट को तोड़े।
Anchor (a) टैग और Span टैग इनलाइन एलिमेंट्स के उदाहरण हैं जो टेक्स्ट के साथ एक ही लाइन में दिखाई देते हैं।
- आप CSS का उपयोग करके किसी भी एलिमेंट के डिस्प्ले बिहेवियर को बदल सकते हैं।
- एक इनलाइन एलिमेंट को `display: block;` का उपयोग करके ब्लॉक एलिमेंट की तरह व्यवहार करने के लिए मजबूर किया जा सकता है।
- एक ब्लॉक एलिमेंट को `display: inline;` का उपयोग करके इनलाइन एलिमेंट की तरह व्यवहार करने के लिए सेट किया जा सकता है।
- यह कन्वर्जन एलिमेंट को नई लाइन पर आने या उसी लाइन में रहने जैसी प्रॉपर्टीज़ को बदल देता है।
यह फ्लेक्सिबिलिटी आपको किसी भी एलिमेंट को अपनी ज़रूरत के अनुसार लेआउट में फिट करने की सुविधा देती है, चाहे उसका डिफ़ॉल्ट बिहेवियर कुछ भी हो।
एक Span एलिमेंट को `display: block;` सेट करके उसे नई लाइन पर लाने और उसकी विड्थ व हाइट को कंट्रोल करने की क्षमता।
- इनलाइन-ब्लॉक एलिमेंट्स इनलाइन की तरह उसी लाइन में रहने की कोशिश करते हैं।
- लेकिन, वे ब्लॉक एलिमेंट्स की तरह कस्टम विड्थ, हाइट, मार्जिन और पैडिंग को सपोर्ट करते हैं।
- यह इनलाइन और ब्लॉक दोनों के फायदों का एक कॉम्बिनेशन है।
- यह एलिमेंट्स को एक ही लाइन में रखते हुए उन्हें साइज़ और स्पेसिंग कंट्रोल करने की अनुमति देता है।
इनलाइन-ब्लॉक लेआउट बनाने के लिए बहुत शक्तिशाली है, खासकर जब आपको एलिमेंट्स को एक साथ अलाइन करना हो लेकिन उन्हें अलग-अलग साइज़ और स्पेसिंग देनी हो।
एक Span एलिमेंट को `display: inline-block;` सेट करके उसे उसी लाइन में रखना और साथ ही उसकी विड्थ, हाइट और चारों तरफ मार्जिन/पैडिंग को कंट्रोल करना।
Key takeaways
- डिस्प्ले प्रॉपर्टी CSS लेआउट का एक कोर कॉन्सेप्ट है जो एलिमेंट्स के रेंडरिंग बिहेवियर को नियंत्रित करता है।
- ब्लॉक एलिमेंट्स फुल-विड्थ लेते हैं और नई लाइन पर शुरू होते हैं, जबकि इनलाइन एलिमेंट्स कंटेंट-विड्थ लेते हैं और उसी लाइन में रहते हैं।
- बॉक्स-साइजिंग: बॉर्डर-बॉक्स का उपयोग पैडिंग और बॉर्डर को एलिमेंट की कुल विड्थ में शामिल करके साइज़िंग को प्रेडिक्टेबल बनाता है।
- आप CSS के माध्यम से किसी भी एलिमेंट के डिस्प्ले टाइप को बदल सकते हैं, जिससे लेआउट में बहुत फ्लेक्सिबिलिटी मिलती है।
- इनलाइन-ब्लॉक डिस्प्ले टाइप इनलाइन और ब्लॉक दोनों के व्यवहार को जोड़ता है, जिससे एलिमेंट्स को एक ही लाइन में रखते हुए साइज़ और स्पेसिंग कंट्रोल की जा सकती है।
Key terms
Display PropertyBlock ElementInline ElementInline-Block ElementBox-SizingBorder-BoxWidthHeightMarginPadding
Test your understanding
- ब्लॉक और इनलाइन एलिमेंट्स के बीच मुख्य अंतर क्या हैं और वे पेज लेआउट को कैसे प्रभावित करते हैं?
- बॉक्स-साइजिंग: बॉर्डर-बॉक्स प्रॉपर्टी क्यों महत्वपूर्ण है और यह एलिमेंट साइज़िंग को कैसे बदलती है?
- आप एक इनलाइन एलिमेंट को ब्लॉक एलिमेंट की तरह व्यवहार करने के लिए कैसे कॉन्फ़िगर कर सकते हैं?
- इनलाइन-ब्लॉक डिस्प्ले प्रॉपर्टी का उपयोग कब करना सबसे उपयुक्त होता है और यह इनलाइन और ब्लॉक से कैसे भिन्न है?
- डिस्प्ले प्रॉपर्टी का उपयोग करके आप किसी एलिमेंट के रेंडरिंग बिहेवियर को कैसे बदल सकते हैं?