डिस्प्ले: इनलाइन और डिस्प्ले: इनलाइन-ब्लॉक के बीच अंतर क्या है?

Question

सीएसएस के मूल्यों inlineऔर inline-blockमूल्यों के बीच अंतर क्या है display?

Answer 1

एक दृश्य उत्तर

एक <span>अंदर एक तत्व की कल्पना करो <div>। यदि आप <span>तत्व को 100px की ऊँचाई और उदाहरण के लिए लाल बॉर्डर देते हैं, तो यह इस तरह दिखेगा

प्रदर्शन: इनलाइन

प्रदर्शन: इनलाइन-ब्लॉक

प्रदर्शन क्षेत्र

कोड: http://jsfiddle.net/Mta2b/

तत्व वाले तत्व तत्वों की display:inline-blockतरह display:inlineहैं, लेकिन उनकी चौड़ाई और ऊंचाई हो सकती है । इसका मतलब है कि आप एक इनलाइन-ब्लॉक एलिमेंट को टेक्स्ट या अन्य एलिमेंट्स के भीतर प्रवाहित करते हुए ब्लॉक के रूप में उपयोग कर सकते हैं।

सारांश के रूप में समर्थित शैलियों का अंतर:

• इनलाइन : केवल margin-left, margin-right, padding-left,padding-right
• इनलाइन-ब्लॉक : margin, padding, height,width

Comments

महान अंतर्ज्ञान। तो अंतर केवल इतना है कि इनलाइन तत्वों की ऊंचाई विशेषता निर्धारित नहीं की जा सकती है?

— user2316667

@ user2316667 और चौड़ाई

— ऑस्कर कैलडरन

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

— S.Serpooshan

पैडिंग-टॉप और पैडिंग-राइट इनलाइन तत्व के प्रदर्शन प्रभाव को भी प्रभावित करता है, जिससे कुछ गड़बड़ होती है।

— tomwang1013

@ manuman94 नहीं, इसका मतलब यह नहीं है। सभी विभिन्न प्रदर्शन प्रकारों के लिए उपयोग के मामले हैं।

— splattne

Answer 2

display: inline;एक वाक्य में उपयोग करने के लिए एक प्रदर्शन मोड है। उदाहरण के लिए, यदि आपके पास एक पैराग्राफ है और आप जो एक शब्द करना चाहते हैं, उसे हाइलाइट करना चाहते हैं:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>तत्व एक है display: inline;क्योंकि इस टैग को हमेशा एक वाक्य में प्रयोग किया जाता है, डिफ़ॉल्ट रूप से। <p>तत्व एक है display: block;क्योंकि यह न तो एक वाक्य है और न ही एक वाक्य में, यह वाक्य का एक ब्लॉक है, डिफ़ॉल्ट रूप से।

एक तत्व के साथ एक या एक या एक ऊर्ध्वाधर display: inline; नहीं हो सकता है । के साथ एक तत्व कर सकते हैं एक है , और । यदि आप एक जोड़ना चाहते हैं करने के लिए तत्व है, तो आप को यह तत्व निर्धारित करने की आवश्यकता । अब आप तत्व और प्रत्येक अन्य ब्लॉक शैली ( भाग ) को जोड़ सकते हैं , लेकिन इसे एक वाक्य ( भाग ) में रखा गया है ।heightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

Comments

बहुत बढ़िया जवाब! tl; dr - यदि आप इनलाइन तत्वों का आकार बदलना चाहते हैं, तो आप इनलाइन-ब्लॉक का उपयोग प्रदर्शन प्रकार के रूप में कर सकते हैं ।

— एरप्रोप्रोन

छोटे सुधार: इनलाइन तत्वों कर सकते हैं क्षैतिज मार्जिन (ठीक है, छोड़ दिया), लेकिन है नहीं खड़ी मार्जिन (ऊपर, नीचे)

— whyleee

अच्छा जवाब क्योंकि आपने उन displayमूल्यों के बारे में उल्लेख किया है, जिनमें से किसी एक को चुनने पर हम क्या कर सकते हैं / नहीं कर सकते ।

— ha9u63ar

Answer 3

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

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 4

उपरोक्त सभी उत्तर मूल प्रश्न पर महत्वपूर्ण जानकारी का योगदान करते हैं। हालांकि, एक सामान्यीकरण है जो गलत लगता है।

चौड़ाई और ऊंचाई को कम से कम एक इनलाइन तत्व (जो कि मैं सोच सकता हूं) - <img>तत्व को सेट करना संभव है ।

दोनों ने यहां और इस डुप्लिकेट स्थिति पर जवाब स्वीकार किया कि यह संभव नहीं है लेकिन यह एक सामान्य नियम जैसा प्रतीत नहीं होता है।

उदाहरण:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

imgहै display: inline, लेकिन इसके widthऔर heightसफलतापूर्वक स्थापित किया गया।

Comments

दरअसल, img-tag में डिस्प्ले-इनलाइन उनके डिफॉल्ट डिस्प्ले वैल्यू के रूप में होती है। इसलिए चौड़ाई और ऊंचाई निर्धारित करना संभव है।

— एलेक्स

img एक इनलाइन तत्व है -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... तो मूल रूप से आप कमोबेश वही बात कह रहे हैं जो मैं कह रहा हूं और आप नीचा दिखा रहे हैं ??

— अलेक्जेंड्रोसा

नहीं, मैं नहीं हूँ। img-टैग एक "बदले हुए तत्व" हैं जिसका मूल अर्थ है कि सामग्री को प्रतिस्थापित किया जाता है इसलिए यह इनलाइन-ब्लॉक तत्व की तरह व्यवहार करता है। और हाँ वास्तविक डिफ़ॉल्ट संपत्ति (ब्राउज़र गणना की गई संपत्ति इनलाइन है)। लेकिन इसका एकमात्र कारण यह है कि इनलाइन-ब्लॉक को CSS2 तक पेश नहीं किया गया था और इसके लिए एक "इनलाइन तत्व एक इनलाइन-ब्लॉक तत्व की तरह व्यवहार कर रहा है" क्योंकि यह इसकी सामग्री द्वारा प्रतिस्थापित किया गया है। यानी आप तत्व को ऊंचाई / चौड़ाई सेट नहीं कर रहे हैं, आप इसकी सामग्री पर सेट कर रहे हैं - Wierd, हाँ। मुझे पता है। draft.csswg.org/css2/conform.html#replaced-element

— एलेक्स

यह वास्तव में दिलचस्प है कि आप क्या कह रहे हैं। मुझे अनुसंधान के लिए कुछ समय दें और फिर से संपादित करें और हो सकता है कि इसके बजाय नीचे और ऊपर ले जाएँ! दिन के अंत में मैं ईमानदारी से पहले से ही महसूस करता हूं कि यह चर्चा पूरी बहस की पूर्णता में योगदान दे रही है।

— अलेक्जेंड्रोसो

Answer 5

splattne के जवाब में शायद सब कुछ शामिल था इसलिए मैं एक ही बात नहीं दोहराऊंगा, लेकिन: inlineऔर CSS संपत्ति के inline-blockसाथ अलग तरह से व्यवहार करता हूं direction।

अगले स्निपेट के भीतर आप देखें one two(क्रम में) प्रदान किया गया है, जैसे यह LTR लेआउट में है। मुझे संदेह है कि यहाँ ब्राउज़र ने LTR पाठ के रूप में अंग्रेजी भाग का पता लगाया और इसे बाएँ से दाएँ दिया।

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

हालांकि, अगर मैं आगे जाना है और सेट displayकरने के लिए inline-block, ब्राउज़र का सम्मान करने के लिए प्रकट होता है directionताकि, संपत्ति और दाएं से बाएं तत्वों प्रस्तुत करना क्रम में two oneप्रदान की गई है।

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

मुझे नहीं पता कि इसके बारे में कोई अन्य प्रश्न हैं या नहीं, मुझे केवल क्रोम पर इस अनुभव के बारे में पता चला है।