Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML ब्लॉक-स्तर बनाम इनलाइन-ब्लॉक तत्व (अवलोकन)

ब्लॉक-लेवल . के बीच अंतर के बारे में जानें &इनलाइन ब्लॉक HTML में तत्व।

HTML में, सभी तत्वों का एक डिफ़ॉल्ट डिस्प्ले होता है वह मान जो उपयोगकर्ता एजेंट स्टाइलशीट (UAS) द्वारा इनहेरिट किया गया है जो सभी ब्राउज़रों में अंतर्निहित है।

दो प्रदर्शन मान विकल्प हैं, ब्लॉक करें और इनलाइन:

  • सीएसएस में ब्लॉक करें:डिस्प्ले:ब्लॉक;
  • सीएसएस में इनलाइन:डिस्प्ले:इनलाइन-ब्लॉक;

किसी भी HTML तत्व का व्यवहार या शैली ब्राउज़र के उपयोगकर्ता एजेंट स्टाइलशीट (UAS) से आती है। - जिसे आप आसानी से ओवरराइड कर सकते हैं। तो किसी भी ब्लॉक-स्तरीय तत्व को एक साधारण घोषणा के साथ इनलाइन तत्व में परिवर्तित किया जा सकता है:डिस्प्ले:इनलाइन-ब्लॉक; — और इसके विपरीत।

ब्लॉक-लेवल एलीमेंट क्या है?

HTML में, एक ब्लॉक-स्तरीय तत्व एक ऐसा तत्व है जो हमेशा एक नई लाइन (जैसे लाइन ब्रेक) पर शुरू होता है और अपने कंटेनर (पैरेंट एलिमेंट) की पूरी चौड़ाई लेता है।

तो अगर मैं एक

. जोड़ता हूं इस अनुच्छेद के ठीक नीचे तत्व, यह अपने मूल तत्व कंटेनर की पूरी चौड़ाई को बाएं से दाएं किनारे तक ले जाता है।

कोड उदाहरण:

<div>I’m a block-level element.</div>

परिणाम:

मैं एक ब्लॉक-स्तरीय तत्व हूं।

ठीक है, यह देखना मुश्किल है कि यह पूरी चौड़ाई लेता है। इसे देखना आसान बनाने के लिए आइए इसमें एक बॉर्डर जोड़ें:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>

परिणाम:

मैं एक ब्लॉक-स्तरीय तत्व हूं।

अब आप

. देख सकते हैं तत्व अपने कंटेनर की पूरी चौड़ाई लेता है, जिस पर आप इस वेबसाइट पर हैं <लेख> तत्व।

जैसा कि मैंने उल्लेख किया है, ब्लॉक-स्तरीय तत्व एक नई लाइन शुरू करते हैं, और यहां बताया गया है कि यह कोड स्तर पर कैसा दिखता है और यह उपयोगकर्ताओं के दृष्टिकोण से ब्राउज़र में कैसे प्रस्तुत होता है:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>

यह कैसा दिखता है:

मैं एक ब्लॉक-स्तरीय तत्व हूं। मैं एक और ब्लॉक-स्तरीय तत्व हूं।

अगर दो

उपरोक्त तत्व इनलाइन . थे वे एक दूसरे के ठीक बगल में एक ही पंक्ति . पर बैठेंगे (जैसा कि आप अगले भाग में देखेंगे)। लेकिन चूंकि वे ब्लॉक-स्तरीय तत्व हैं, इसलिए वे लेआउट में अपनी लाइन पर बैठते हैं और प्रत्येक पैरेंट कंटेनर की पूरी चौड़ाई लेते हैं

सभी HTML ब्लॉक-स्तरीय तत्व

HTML में ब्लॉक-स्तरीय तत्वों की पूरी सूची:

<पता>
संपर्क जानकारी।
<लेख>
लेख सामग्री।
<एक तरफ>
एक तरफ सामग्री।
लंबा ("ब्लॉक") उद्धरण।
<विवरण>
प्रकटीकरण विजेट।
<संवाद>
संवाद बॉक्स।
विवरण सूची में किसी शब्द का वर्णन करता है।
दस्तावेज़ प्रभाग।
विवरण सूची।
विवरण सूची शब्द।
<फ़ील्डसेट>
फ़ील्ड सेट लेबल.
<अंजीर>
चित्र कैप्शन।
<आंकड़ा>
मीडिया सामग्री को कैप्शन के साथ समूहित करता है
)।
<डीटी> <पाद>>
अनुभाग या पृष्ठ पाद लेख।
<डीटी> <फॉर्म>
इनपुट फॉर्म।

,

,

,

,
,

शीर्षक स्तर 1-6.
<हेडर>
अनुभाग या पृष्ठ शीर्षलेख।
समूह शीर्षलेख जानकारी।
क्षैतिज नियम (विभाजक रेखा)।


    • सूची आइटम।
    <मुख्य>
    मुख्य सामग्री कंटेनर।
    नेविगेशन लिंक शामिल हैं।
    आदेशित सूची।

    पैराग्राफ।
    <डीटी> <पूर्व>
    पूर्व स्वरूपित पाठ।
    <अनुभाग>
    वेब पेज का सेक्शन।
    टेबल.
    अक्रमित सूची।

    इनलाइन तत्व क्या हैं?

    HTML में, इनलाइन तत्व ऐसे तत्व हैं जो नहीं हैं एक नई लाइन पर शुरू करें, और केवल वही स्थान लेता है जिसकी उन्हें आवश्यकता होती है (उनकी सामग्री की चौड़ाई, उदा. अंदर के पाठ की लंबाई)।

    कोड उदाहरण:

    <div style="display:inline-block;border:1px solid #dd4c4f;">
  I’m a inline-block element
</div>

    यह कैसा दिखता है:

    मैं एक इनलाइन ब्लॉक-एलिमेंट हूं।

    इनलाइन ब्लॉक तत्व एक नई लाइन (लाइन ब्रेक) पर शुरू नहीं होते हैं।

    इसलिए यदि आपके पास कोड स्तर पर एक दूसरे के बगल में दो इनलाइन ब्लॉक तत्व हैं:

    <div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a inline block element.
</div>
<div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a another inline block element.
</div>

    फिर वे ब्राउज़र में इस तरह प्रस्तुत करते हैं:

    मैं एक इनलाइन ब्लॉक-एलिमेंट हूं। मैं एक इनलाइन एक और ब्लॉक-एलिमेंट हूं।

    और इनलाइन ब्लॉक और ब्लॉक एक दूसरे से कैसे भिन्न हैं, इस बिंदु को चलाने के लिए, आइए उनकी तुलना "एक साथ" करें:

    मैं एक इनलाइन ब्लॉक-एलिमेंट हूं।मैं एक ब्लॉक-एलिमेंट हूं।

    सभी HTML इनलाइन ब्लॉक तत्व

    HTML में सभी इनलाइन तत्वों की सूची:

    <संक्षिप्त नाम>
    <ऑडियो> (केवल तभी जब उसके पास दृश्यमान नियंत्रण हों)
    <बड़ा>

    <बटन>
    <कैनवास>
    <डीटी> <उद्धरण>
    <डेटा>
    <डेटालिस्ट>
    <एम्बेड>