display: inline प्रदर्शन बनाम: ब्लॉक

Question

क्या निम्नलिखित सीएसएस के बीच मूल अंतर यह है:

display:inline 

और इस:

display:block 

एक तत्व पर अलग से इन का उपयोग करना, मैं एक ही परिणाम मिलता है।

Answer 1

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

प्रदर्शन: इनलाइन का अर्थ है कि तत्व उसी रेखा पर वर्तमान ब्लॉक के अंदर इनलाइन प्रदर्शित होता है। केवल जब यह दो ब्लॉक के बीच होता है तो तत्व 'अज्ञात ब्लॉक' बनाता है, हालांकि इसकी सबसे छोटी संभव चौड़ाई होती है।

प्रदर्शन विकल्पों के बारे में और अधिक पढ़ें: http://www.quirksmode.org/css/display.html

Answer 2

ब्लॉक

पहले और बाद में, पूरी चौड़ाई उपलब्ध ऊपर ले जाता है एक नई लाइन के साथ (प्रदर्शन: ब्लॉक;)

इनलाइन

केवल उतनी चौड़ाई लेता है जितना इसकी आवश्यकता है, और नई लाइनों को मजबूर नहीं करता है (प्रदर्शन: इनलाइन;)

Answer 3

display: block - से पहले या तत्व

Answer 4

के बाद तत्व करने के लिए एक पृष्ठभूमि रंग जोड़ें और आप अच्छी तरह से इनलाइन बनाम के अंतर देखेंगे कोई लाइन ब्रेक - पहले और तत्व

display: inline के बाद एक लाइन ब्रेक ब्लॉक, जैसा कि अन्य पोस्टर द्वारा समझाया गया है। जबकि display: inline; एक इनलाइन स्तर तत्व बनाता है

Answer 5

display: block;, एक ब्लॉक स्तर तत्व पैदा करता है। यदि आप सीएसएस बॉक्स मॉडल से परिचित नहीं हैं, तो अंतर को समझाना थोड़ा मुश्किल है, लेकिन यह कहना पर्याप्त है कि ब्लॉक स्तर तत्व किसी दस्तावेज़ के प्रवाह को तोड़ते हैं, जबकि इनलाइन तत्व नहीं होते हैं।

ब्लॉक स्तर तत्वों के कुछ उदाहरणों में शामिल हैं: div, h1, p, और hr HTML टैग।

इनलाइन स्तर तत्वों में से कुछ उदाहरणों में शामिल: a, span, strong, em, b, और i HTML टैग।

व्यक्तिगत रूप से, मुझे इनलाइन तत्वों के बारे में टाइपोग्राफ़िकल तत्वों के बारे में सोचना पसंद है। यह पूरी तरह से या तकनीकी रूप से सही नहीं है, लेकिन अधिकांश भाग इनलाइन तत्वों के लिए टेक्स्ट की तरह बहुत व्यवहार करते हैं।

आप here विषय पर आलेख के माध्यम से और अधिक पढ़ सकते हैं। इस धागे में कई अन्य लोगों को यह उद्धृत करते हुए देखते हुए, यह पढ़ने के लायक हो सकता है।

Answer 6

प्रदर्शन: ब्लॉक लाइन ब्रेक बिना पूरी लाइन यानी ले जाएगा

प्रदर्शन: इनलाइन केवल सटीक अंतरिक्ष ले जाएगा कि यह आवश्यकता है।

#block 
    { 
    display : block; 
    background-color:red; 
    border:1px solid; 
    } 

#inline 
{ 
    display : inline; 
    background-color:red; 
    border:1px solid; 
} 

आप इस पहेली http://jsfiddle.net/RJXZM/1/ में उदाहरण का उल्लेख कर सकते हैं।

Answer 7

प्रदर्शन: ब्लॉक यह बहुत अधिक 'पी' टैग के समान व्यवहार करता है और यह पूरी पंक्ति लेता है और इसके आगे कोई तत्व नहीं हो सकता है जब तक यह फ़्लोट नहीं हो जाता है। डिस्प्ले: इनलाइन यह आवश्यकतानुसार जितनी अधिक जगह का उपयोग करता है और अन्य तत्वों को स्वयं के साथ गठबंधन करने की अनुमति देता है।

फॉर्मों के मामले में इन गुणों का उपयोग करें और आपको बेहतर समझ मिलेगी।

Answer 8

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

, स्क्रीन के संपूर्ण पंक्ति (100%) लेता है यह हमेशा स्क्रीन आकार के 100% है

display block example

display: inline-ब्लॉक जितना आवश्यक हो उतना चौड़ाई लेता है, यह 1% से 100% स्क्रीन आकार

display inline-block example

है कि क्यों हम div और अवधि

डिव डिफ़ॉल्ट स्टाइल प्रदर्शन ब्लॉक है: यह स्क्रीन की पूरी चौड़ाई लेता

अवधि डिफ़ॉल्ट स्टाइल प्रदर्शन है: इनलाइन ब्लॉक: काल पर शुरू नहीं करता है एक नई लाइन और केवल

Answer 9

एक ब्लॉक या इनलाइन-ब्लॉक में चौड़ाई हो सकती है (उदाहरण के लिए चौड़ाई: 400 पीएक्स) जबकि इनलाइन तत्व चौड़ाई से प्रभावित नहीं होता है। इनलाइन तत्व पाठ की अगली पंक्ति में फैल सकता है (उदाहरण http://codepen.io/huijing/pen/PNMxXL इसे देखने के लिए अपनी ब्राउज़र विंडो का आकार बदलें) जबकि ब्लॉक तत्व नहीं कर सकता है।

.inline { 
     background: lemonchiffon; 
     div { 
     display: inline; 
     border: 1px dashed darkgreen; 
     } 

Answer 10

ब्लॉक तत्वों: तत्वों div, पी पसंद है, शीर्षकों ब्लॉक स्तर हैं। वे नई लाइन से शुरू होते हैं और पैरेंट तत्व की पूरी चौड़ाई पर कब्जा करते हैं। इनलाइन तत्व: तत्वों को पसंद किया गया बी, i, span, img इनलाइन स्तर हैं। वे कभी भी नई लाइन से शुरू नहीं होते हैं और सामग्री की चौड़ाई पर कब्जा नहीं करते हैं।

Answer 11

ब्लॉक तत्व अपने माता-पिता को भरने के लिए विस्तारित होते हैं।

इनलाइन तत्व अनुबंध अपने बच्चों को पकड़ने के लिए पर्याप्त बड़े होने के लिए अनुबंध करते हैं।

Answer 12

यहाँ एक तुलना तालिका है

आप देख सकते हैं examples here.