<Img> तत्व ब्लॉक स्तर या इनलाइन स्तर है?

Question

मैंने कहीं पढ़ा है कि <img>तत्व दोनों की तरह व्यवहार करता है। यदि सही है, तो क्या कोई उदाहरण के साथ समझा सकता है?

Answer 1

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

CSS में, आप display: inline-blockइसे छवियों के व्यवहार को दोहराने के लिए एक तत्व सेट कर सकते हैं *।

छवियों और वस्तुओं को "प्रतिस्थापित" तत्वों के रूप में भी जाना जाता है, क्योंकि उनके पास प्रति सामग्री नहीं है, तत्व अनिवार्य रूप से द्विआधारी डेटा द्वारा प्रतिस्थापित किया जाता है।

* ध्यान दें कि ब्राउज़र तकनीकी display: inlineरूप से उपयोग करते हैं (जैसा कि डेवलपर टूल में देखा गया है) लेकिन वे छवियों को विशेष उपचार दे रहे हैं। वे अभी भी सभी लक्षणों का पालन करते हैं inline-block।

Comments

मैं हमेशा पढ़ता हूं कि छवियां इनलाइन तत्व हैं, इनलाइन-ब्लॉक नहीं हैं, लेकिन यह समझ में आता है कि चौड़ाई और ऊंचाई को जोड़ने की क्षमता के कारण वे इनलाइन-ब्लॉक होंगे।

— डोनाटो

यह उत्तर तकनीकी रूप से सही नहीं है। संक्षेप में बोलना, imgतत्व inline-blockवास्तव में inlineतत्व नहीं हैं। आप एक आधुनिक ब्राउज़र में एक छवि पर राइट क्लिक करके, "निरीक्षण तत्व" पर क्लिक करके, फिर गणना की गई शैली को देख सकते हैं, जो दिखाएगा display: inline। टैग के अंदर कोई ब्लॉक संदर्भ नहीं है, इसलिए इसे कॉल करना सही नहीं है inline-block। प्रतिस्थापित इनलाइन तत्वों के बारे में अधिक जानकारी के लिए क्वेंटिन का उत्तर और यह एमडीएन लेख देखें ।

— मैक्सिमिलियन लूमिस्टर

@Max लिंक लिंक इनलाइन होने वाले तत्वों के बारे में कुछ नहीं कहता।

— असंतुष्टगीत

@DisgruntledGoat मेरे द्वारा पोस्ट किया गया लिंक यह नहीं कहता है कि imgतत्व इनलाइन हैं - Google Chrome देव उपकरण imgइनलाइन होने के रूप में तत्वों को दिखाते हैं। यह पोस्ट एकमात्र ऐसी जगह है जो मैंने अब तक पाई है जो कहती है कि वे inline-blockइसके बजाय हैं। दिलचस्प बात यह है कि मुझे ऐसा कोई अधिकार नहीं मिला है जो कहता हो कि वे inlineया तो हैं। क्या टैग कार्यान्वयन-निर्भरता का इलाज करना है, शायद?

— मैक्सिमिलियन लूमिस्टर

@Max के अनुसार इस , प्रतिस्थापित तत्वों सीएसएस स्वरूपण मॉडल के दायरे से बाहर हैं। HTML या CSS स्पेक्स में कुछ भी निर्दिष्ट नहीं है कि चित्र इनलाइन हैं। इसलिए ब्राउज़र चाहे जो भी कहे, छवियों का ठीक उसी तरह व्यवहार किया जाता है जैसे वे सेट किए गए थे display:inline-block।

— असंतुष्टगीतगोट

Answer 2

एक imgतत्व एक प्रतिस्थापित इनलाइन तत्व है ।

यह एक इनलाइन तत्व की तरह व्यवहार करता है (क्योंकि यह है), लेकिन इनलाइन तत्वों के बारे में कुछ सामान्यीकरण तत्वों पर लागू नहीं होते imgहैं।

जैसे

सामान्यीकरण: "चौड़ाई इनलाइन तत्वों पर लागू नहीं होती है"

वास्तव में कल्पना क्या कहती है : "इस पर लागू होता है: सभी तत्व लेकिन गैर-प्रतिस्थापित इनलाइन तत्व, तालिका पंक्तियाँ, और पंक्ति समूह"

चूंकि एक छवि एक प्रतिस्थापित इनलाइन तत्व है, यह लागू होता है।

Answer 3

IMG तत्व इनलाइन होते हैं, जिसका अर्थ है कि जब तक उन्हें फ्लोट नहीं किया जाता है तब तक वे पाठ और अन्य इनलाइन तत्वों के साथ क्षैतिज रूप से प्रवाह करेंगे।

वे "ब्लॉक" तत्व हैं जिसमें उनकी चौड़ाई और ऊंचाई है। लेकिन वे उस संबंध में "इनलाइन-ब्लॉक" की तरह अधिक व्यवहार करते हैं।

Answer 4

लगभग सभी उद्देश्यों के लिए, उन्हें एक चौड़ाई सेट के साथ एक इनलाइन तत्व के रूप में सोचते हैं। मूल रूप से आप यह निर्धारित करने के लिए स्वतंत्र हैं कि आप सीएसएस का उपयोग करके चित्र कैसे प्रदर्शित करना चाहते हैं मैं आमतौर पर कुछ इमेज क्लासेस सेट करता हूँ जैसे:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

Answer 5

जब भी आप कोई चित्र सम्मिलित करते हैं तो वह केवल उस चौड़ाई को लेता है जो छवि में मूल रूप से है। आप इसके आगे कोई अन्य html तत्व जोड़ सकते हैं और आप देखेंगे कि यह इसे अनुमति देगा। यह छवि को एक "इनलाइन" तत्व बनाता है।

Answer 6

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