प्रदर्शन: इनलाइन बनाम प्रदर्शन: ब्लॉक
जवाबों:
प्रदर्शन: ब्लॉक का मतलब है कि तत्व को ब्लॉक के रूप में प्रदर्शित किया जाता है, क्योंकि पैरा और हेडर हमेशा से रहे हैं। एक ब्लॉक में ऊपर और नीचे कुछ व्हाट्सएप होता है और उसके बगल में कोई HTML तत्व नहीं होता है, सिवाय इसके जब अन्यथा आदेश दिया जाता है (उदाहरण के लिए, किसी अन्य तत्व के लिए फ्लोट घोषणा जोड़कर)।
प्रदर्शन: इनलाइन का मतलब है कि तत्व इनलाइन प्रदर्शित होता है, उसी लाइन पर वर्तमान ब्लॉक के अंदर। केवल जब यह दो ब्लॉकों के बीच होता है, तो तत्व एक 'अनाम ब्लॉक' बनाता है, हालांकि इसमें सबसे छोटी संभव चौड़ाई होती है।
प्रदर्शन विकल्पों के बारे में और पढ़ें: http://www.quirksmode.org/css/display.html
खंड मैथा
पहले और बाद में एक नई लाइन के साथ उपलब्ध पूर्ण चौड़ाई को लेता है (प्रदर्शन: ब्लॉक;)
पंक्ति में
केवल उतनी ही चौड़ाई लेता है जितनी उसे आवश्यकता होती है, और नई लाइनों को प्रदर्शित नहीं करता है (प्रदर्शन: इनलाइन;)
यहाँ एक तुलना तालिका है:
आप यहां उदाहरण देख सकते हैं।
display: block;एक ब्लॉक-स्तरीय तत्व display: inline;बनाता है , जबकि एक इनलाइन-स्तरीय तत्व बनाता है। यदि आप सीएसएस बॉक्स मॉडल से परिचित नहीं हैं, तो अंतर को समझाना थोड़ा मुश्किल है, लेकिन यह कहना पर्याप्त है कि ब्लॉक स्तर के तत्व एक दस्तावेज़ के प्रवाह को तोड़ते हैं , जबकि इनलाइन तत्व नहीं होते हैं।
ब्लॉक स्तर तत्वों के कुछ उदाहरणों में शामिल हैं: div, h1, p, और hrHTML टैग।
इनलाइन स्तर तत्वों के कुछ उदाहरणों में शामिल हैं: a, span, strong, em, b, और iHTML टैग।
व्यक्तिगत रूप से, मैं इनलाइन तत्वों को टाइपोग्राफिक तत्वों के रूप में सोचना पसंद करता हूं । यह पूरी तरह से या तकनीकी रूप से सही नहीं है, लेकिन अधिकांश भाग के लिए इनलाइन तत्व पाठ की तरह व्यवहार करते हैं।
आप विषय पर लेख के माध्यम से एक और अधिक पढ़ सकते हैं यहाँ । इस सूत्र में कई अन्य लोगों को देखकर इसे उद्धृत किया है, यह एक पढ़ने के लायक हो सकता है।
प्रदर्शन: ब्लॉक पूरी लाइन ले जाएगा यानी बिना लाइन ब्रेक के
प्रदर्शन: इनलाइन केवल वही स्थान लेगा जिसकी उसे आवश्यकता है।
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
आप इस फिडेल http://jsfiddle.net/RJXZM/1/ में उदाहरण देख सकते हैं ।
ब्लॉक तत्वों का विस्तार उनके माता-पिता को भरने के लिए होता है।
इनलाइन तत्वों का अनुबंध अपने बच्चों को रखने के लिए पर्याप्त बड़ा होना है।
प्रदर्शन क्षेत्र
स्क्रीन की पूरी पंक्ति (100%) लेता है, यह हमेशा स्क्रीन आकार का 100% होता है
प्रदर्शन: इनलाइन-ब्लॉक जितना आवश्यक हो उतना चौड़ाई लेता है, यह स्क्रीन आकार का 1% -100% हो सकता है
इनलाइन-ब्लॉक उदाहरण प्रदर्शित करें
इसलिए हमारे पास div और span है
डिव डिफ़ॉल्ट स्टाइल डिस्प्ले ब्लॉक है: यह स्क्रीन की पूरी चौड़ाई लेता है
स्पैन डिफॉल्ट स्टाइल डिस्प्ले है: इनलाइन ब्लॉक: स्पैन एक नई लाइन पर शुरू नहीं होता है और केवल उतनी ही चौड़ाई लेता है जितना आवश्यक हो
तत्व में एक पृष्ठभूमि-रंग जोड़ें और आप अच्छी तरह से इनलाइन बनाम ब्लॉक का अंतर देखेंगे, जैसा कि अन्य पोस्टर द्वारा समझाया गया है।
प्रदर्शन: ब्लॉक करें यह बहुत ही उसी तरह से व्यवहार करता है जैसे कि 'पी' टैग और यह पूरी पंक्ति लेता है और इसके आगे कोई भी तत्व नहीं हो सकता है जब तक कि यह फ्लोट नहीं किया जाता है। प्रदर्शन: इनलाइन यह केवल आवश्यकतानुसार अधिक से अधिक स्थान का उपयोग करता है और अन्य तत्वों को अपने साथ गठबंधन करने की अनुमति देता है।
रूपों के मामले में इन गुणों का उपयोग करें और आपको एक बेहतर समझ मिलेगी।
एक ब्लॉक या इनलाइन-ब्लॉक की चौड़ाई हो सकती है (जैसे चौड़ाई: 400px) जबकि इनलाइन तत्व चौड़ाई से प्रभावित नहीं होता है। इनलाइन तत्व पाठ की अगली पंक्ति (उदाहरण http://codepen.io/hu बीजिंग/ pen/ PNMxXL को देखने के लिए आपकी ब्राउज़र विंडो का आकार बदल सकता है) को ब्लॉक तत्व नहीं कर सकता है।
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}ब्लॉक एलिमेंट्स : डिव, पी, हेडिंग को पसंद करने वाले तत्व ब्लॉक लेवल हैं। वे नई लाइन से शुरू करते हैं और मूल तत्व की पूरी चौड़ाई पर कब्जा कर लेते हैं। इनलाइन एलिमेंट्स : बी, आई, स्पैन, आईएमजी जैसे तत्व इनलाइन स्तर के होते हैं। वे कभी भी नई लाइन से शुरू नहीं होते हैं और सामग्री की चौड़ाई पर कब्जा नहीं करते हैं।
डिफ़ॉल्ट रूप से, इनलाइन तत्व दस्तावेज़ प्रवाह में शुरू करने के लिए एक नई लाइन को बाध्य नहीं करते हैं। दूसरी ओर, ब्लॉक तत्व, आमतौर पर एक लाइन ब्रेक का कारण बनते हैं जिससे आप इस लिंक को देख सकते हैं