प्रदर्शन क्यों करता है: इनलाइन-ब्लॉक; एक बच्चे तत्व से एक रेखांकन हटा दें?

Question

हाल ही में मैं एक सवाल के जवाब दिए और ओपी a तत्व के अंदर लिपटे पूरे पाठ के लिए text-decoration: underline; चाहता था, लेकिन नहीं एक span अंदर लिपटे, तो यह इस

<a href="#"><span>Not Underline</span>Should Be Underlined</a> 

तो बस

span { 
    text-decoration: none; 
} 

देने की तरह कुछ था

पाठ एक span तत्व

अंदर लिपटे के लिए रेखांकन को दूर नहीं करता लेकिन इस underl को दूर करता है ऑफ़लाइन

span { 
    text-decoration: none; 
    display: inline-block; 
} 

तो मैं span एक inline-block बना दिया है और यह काम किया, जिसके कारण मैं आमतौर पर करते हैं। लेकिन जब यह स्पष्टीकरण के लिए आया तो मैं यह समझाने में सक्षम नहीं था कि ऐसा क्यों करना वास्तव में उस रेखांकन को हटा देता है जहां text-decoration: none; का उपयोग नहीं किया जाता है।

Demo

Answer 1

पाठ सजावट कुछ मामलों में कुछ वंशजों के एक तत्व से उगाया जाता है। spec उन सभी मामलों का वर्णन करता है जिनमें यह होता है और ऐसा नहीं होता है (साथ ही ऐसे मामलों जहां व्यवहार स्पष्ट रूप से अपरिभाषित है)। इधर, निम्नलिखित भाग प्रासंगिक है:

ध्यान दें कि पाठ सजावट चल और पूरी तरह से तैनात वंश में प्रसारित नहीं कर रहे हैं, और न ही इस तरह के इनलाइन ब्लॉक और इनलाइन तालिकाओं के रूप में परमाणु इनलाइन स्तर के वंशजों की सामग्री के।

ध्यान दें कि यह प्रचार विरासत के समान नहीं है और पूरी तरह से एक अलग अवधारणा है; वास्तव में, text-decoration: none और text-decoration: inherit तरह से प्रचार को प्रभावित नहीं करते आप उन्हें उम्मीद थी के लिए:

• text-decoration: none सीधा सा अर्थ है "इस तत्व का अपना कोई पाठ सजावट है", और
• text-decoration: inherit का अर्थ है "इस तत्व है वही निर्दिष्ट text-decoration इसके माता-पिता के रूप में निर्दिष्ट है। "

दोनों स्थितियों में, पैरेंट टेक्स्ट सजावट अभी भी लागू होने वाले तत्व के लिए प्रचारित की जाएगी। आप inherit का उपयोग करके अपने माता-पिता के समान टेक्स्ट सजावट के लिए एक इनलाइन-ब्लॉक को मजबूर कर सकते हैं, लेकिन कोई अन्य सजावट नहीं है जिसे माता-पिता अपने पूर्वजों से प्रचार के माध्यम से प्राप्त करते हैं।

इसका यह भी अर्थ है कि display: inline-block टेक्स्ट सजावट को प्रसारित होने से रोकने के लिए पर्याप्त है। आपको text-decoration: none फिर से निर्दिष्ट करने की आवश्यकता नहीं है - यह पहले से प्रारंभिक मान है।