सीएसएस: प्रदर्शन मतभेद

Question

क्या प्रदर्शन के बीच अंतर है: ब्लॉक और display: inline

Answer 1

ब्लॉक तत्वों आम तौर पर खड़ी ढेर जाएगा, जबकि इनलाइन तत्वों क्षैतिज लाइन अप होगा।

दो divs एक दूसरे के शीर्ष पर ढेर होंगे, लेकिन यदि आप उन्हें प्रदर्शित करने के लिए सेट करते हैं: इनलाइन, वे क्षैतिज एक दूसरे के बगल में होंगे। अवधि टैग के साथ vise-versa।

Answer 2

डिस्प्ले: ब्लॉक
ऑब्जेक्ट को अन्य वस्तुओं को एक कंटेनर के भीतर एक नई लाइन पर मजबूर करने का कारण बन जाएगा।

डिस्प्ले: इनलाइन
ऑब्जेक्ट को अन्य ऑब्जेक्ट्स के समान लाइन पर प्रदर्शित करने का प्रयास करता है।

प्रदर्शन: ब्लॉक

 
Item 1 
Item 2 
Item 3 

display: inline

 
Item 1 Item 2 Item 3 

Answer 3

प्रदर्शन: ब्लॉक मतलब यह है कि तत्व एक ब्लॉक के रूप में प्रदर्शित किया जाता है, के रूप में पैराग्राफ और हेडर हमेशा किया गया है। एक ब्लॉक में ऊपर और नीचे कुछ सफेद जगह है और इसके आगे कोई HTML तत्व सहन नहीं करता है, अन्यथा आदेश दिया जाता है (उदाहरण के लिए, किसी अन्य तत्व को फ्लोट घोषणा जोड़कर)। प्रदर्शन: इनलाइन का मतलब है कि तत्व उसी रेखा पर वर्तमान ब्लॉक के अंदर इनलाइन प्रदर्शित होता है। केवल जब यह दो ब्लॉक के बीच होता है तो तत्व 'अज्ञात ब्लॉक' बनाता है, हालांकि इसकी सबसे छोटी संभव चौड़ाई होती है।

Answer 4

ब्लॉक पहले और बाद में एक नई लाइन के साथ उपलब्ध पूर्ण चौड़ाई का उपयोग करता है। इनलाइन केवल नई चौड़ाई को मजबूर किए बिना चौड़ाई की आवश्यकता होती है।

Answer 5

हाँ,

प्रदर्शन: ब्लॉक तत्व एक ब्लॉक जैसे की तरह व्यवहार करता है: <p>

display: inline बनाने के लिए और तत्व लेआउट इनलाइन।

इन्हें उन तत्वों पर लागू किया जा सकता है जो विपरीत प्रदर्शन प्रकार के लिए डिफ़ॉल्ट हैं।

संभावित मान

* none - no display at all. 
* inline - An inline box. 
* block - A block box. 
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy. 
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing. 
* list-item - the equivalent of the default styling of the HTML li element. 
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE. 
* inline-table - an inline-level table. Not supported by IE. 
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE. 
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE. 
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE. 
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE. 
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE. 
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE. 
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE. 
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE. 

* source

Answer 6

वहाँ सीएसएस है कि तत्वों को सौंपा जा सकता में संदर्भ ड्राइंग के दो मुख्य प्रकार हैं। एक, display: block, स्थिति योग्य बक्से बनाता है। दूसरा, display: inline सामग्री को एक बॉक्स के भीतर लाइनों की एक श्रृंखला के रूप में बहता है।

डिफ़ॉल्ट रूप से, एक ब्लॉक सभी क्षैतिज स्थान लेता है, इसलिए ब्लॉक की एक श्रृंखला दूसरे के नीचे एक दिखाई देगी, जो लंबवत रूप से ढंका हुआ है। जैसा कि इनलाइन तत्व लाइनों में बहते हैं, वे क्षैतिज रूप से प्रस्तुत किए जाते हैं, एक दूसरे के बाद एक शब्द के रूप में।

सामान्य रूप से, आप एक पृष्ठ को रखने के लिए ब्लॉक का उपयोग करते हैं, जबकि इनलाइन टेक्स्ट टेक्स्ट के टुकड़ों के भीतर आपको टेक्स्ट सामग्री के लिए आरक्षित किया जाता है, उदाहरण के लिए, लिंक।

उदाहरण के लिए अन्य प्रकार के ड्राइंग संदर्भ भी हैं, उदाहरण के लिए, display: table, हालांकि इनका उपयोग उनकी विशेष प्रकृति और/या ब्राउज़र समर्थन की कमी के कारण अधिक दुर्लभ रूप से किया जाता है।

अधिक जानकारी the CSS 2.1 specification में उपलब्ध है।

Answer 7

यह ध्यान रखना महत्वपूर्ण है कि इनलाइन तत्वों को अपनी चौड़ाई, ऊंचाई या लंबवत सफेद स्थान (मार्जिन/पैडिंग टॉप/नीचे) असाइन नहीं किया जा सकता है।

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

Answer 8

एक HTML दस्तावेज़ को प्रवाह माना जाता है, शीर्ष पर ढेर HTML तत्वों के ढेर के बारे में सोचें।

एक ब्लॉक को प्रवाह में परिभाषित किया गया है (डिफ़ॉल्ट रूप से पृष्ठ के रूप में बड़ा) और किसी अन्य ब्लॉक को ओवरलैप किए बिना शीर्ष पर जितना संभव हो सके धक्का दिया जाता है। उदाहरण: div, पी, टेबल।

एक इनलाइन तत्व बॉक्स को परिभाषित नहीं करता है (यही कारण है कि आप इसकी चौड़ाई और ऊंचाई निर्धारित नहीं कर सकते हैं), यह वर्तमान ब्लॉक में अन्य इनलाइन तत्वों में जोड़ा जाएगा। उदाहरण: अवधि, कोड, ए।

Answer 9

display: block 

तत्व अपने माता-पिता के पूरे कंटेनर को ले जाएगा। आम तौर पर एक नई लाइन में शुरू होता है।

display: inline-block 

यह एक इनलाइन तत्व बनाएगा जो केवल आवश्यकतानुसार उतना ही स्थान लेगा। लाइन में कहीं भी शुरू कर सकते हैं।

उदाहरण का उपयोग: अपने पृष्ठ के शीर्ष पर मेनू बार बनाने के दौरान (मेनू-आइटम रैपर को अक्सर display: inline-block असाइन किया जाता है)