इनलाइन गुमनाम बॉक्स?

Question

मैं ब्लॉक इस सामग्री sitepoint link

बाद मार्कअप ब्लॉक + इनलाइन + के रूप में प्रदान की गई है पर सवाल है

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p> 

क्रोम:

In 1912, - display: block 
<em>Titanic</em> - display:inline 
sank on her maiden voyage. - display:block 

Sitepoint लिंक कहते हैं 2 गुमनाम बक्से (1 और 3) पी के अंदर सभी बक्से रखने के लिए इनलाइन होना चाहिए। लेकिन क्रोम ब्लॉक और इनलाइन के मिश्रण के रूप में पी के अंदर बक्से प्रस्तुत करता है।

प्रति CSS3 box model

ब्लॉक स्तर बॉक्स के रूप में या तो लाइन बक्से या ब्लॉक स्तर बक्से, लेकिन दोनों हो सकती है। यदि आवश्यक हो, तो इस बॉक्स के तत्व से संबंधित किसी भी लाइन बॉक्स को एक या अधिक (जितना संभव हो सके) गुमनाम बॉक्स में 'ब्लॉक' के 'डिस्प्ले' के साथ लपेटा जाता है।

डब्ल्यू 3 सी सिफारिश साइटपॉइंट सामग्री के अनुसार सही लगता है लेकिन मुझे क्रोम पर ब्लॉक-स्तर बॉक्स (पी) के अंदर बक्से का मिश्रण मिल रहा है।

फिर से सिफारिश की एक बिंदु कहती है कि अनाम बॉक्स केवल ब्लॉक होना चाहिए जो साइटपॉइंट सामग्री के विपरीत है।

प्रति CSS3 box model

ध्यान दें कि गुमनाम बक्से इस मॉड्यूल में परिभाषित सभी ब्लॉक स्तर हैं, लेकिन गुमनाम बक्से अन्य मॉड्यूल में परिभाषित अलग हो सकता है के रूप में।

मेरा प्रश्न है:

1) सभी 3 बक्से इनलाइन होना चाहिए (ब्राउज़र ब्लॉक + इनलाइन + ब्लॉक renders)

2) इनलाइन गुमनाम W3C मानक में वर्णित बॉक्स है??

Answer 1

Visual Formatting Model में धारा 9.2.2.1 वास्तव में आपके लिए लगभग एक समान उदाहरण है, उदा।

किसी भी पाठ जो सीधे ब्लॉक कंटेनर तत्व (इनलाइन तत्व के अंदर नहीं) के अंदर निहित है, को अज्ञात इनलाइन तत्व के रूप में माना जाना चाहिए।

इस तरह HTML मार्कअप के साथ एक दस्तावेज़ में:

<p>Some <em>emphasized</em> text</p> 

<p> इसके अंदर कई इनलाइन बक्से के साथ एक ब्लॉक बॉक्स, उत्पन्न करता है। "जोर" के लिए बॉक्स एक इनलाइन तत्व (<em>) द्वारा उत्पन्न एक इनलाइन बॉक्स है, लेकिन अन्य बॉक्स ("कुछ" और "टेक्स्ट") ब्लॉक-स्तर तत्व (<p>) द्वारा उत्पन्न इनलाइन बॉक्स हैं। उत्तरार्द्ध को अनाम इनलाइन बॉक्स कहा जाता है, क्योंकि उनके पास एक इनलाइन-स्तरीय तत्व नहीं है।

आप क्रोम के डेवलपर टूल में जो देख रहे हैं वह उस तत्व के लिए डिस्प्ले वैल्यू है जो गुमनाम बॉक्स में रहता है, न कि इनलाइन बॉक्स के स्वयं।वे सभी वास्तव में इनलाइन बॉक्स हैं, लेकिन "In 1912" & "sank on her maiden voyage" अज्ञात होंगे जबकि <em> तत्व एक गैर-अज्ञात इनलाइन बॉक्स बनाएगा क्योंकि यह एक इनलाइन-स्तर तत्व है।

Answer 2

em तत्व से पहले और बाद में पाठ अज्ञात इनलाइन बॉक्स में लपेटा गया है।

यदि आप इस fiddle में देखते हैं, तो सभी पाठ एक पंक्ति पर इनलाइन दिखाए जाते हैं। एम एक इनलाइन तत्व है, "1 9 12 में," एक इनलाइन अनाम बॉक्स में लपेटा गया है, जैसा कि "अपनी पहली यात्रा पर डूब गया है।"

डीबगर कहेंगे p तत्व display: block है जैसा कि है। डीबगर अज्ञात बक्से नहीं दिखाता है, इसलिए आप नहीं देखेंगे कि em से पहले और बाद में पाठ वास्तव में इनलाइन है। आप इसे देख सकते हैं, जैसे कि वे display: block थे, वे तत्व की चौड़ाई होगी, और em को एक नई पंक्ति पर दबाएं। http://www.w3.org/TR/CSS2/visuren.html#anonymous