मार्जिन-टॉप अवधि तत्व के लिए काम नहीं कर रहा है?

Question

क्या कोई मुझे बता सकता है कि मैंने गलत क्या किया? सब कुछ काम कर रहा है, केवल एक चीज यह है कि शीर्ष पर कोई मार्जिन नहीं है।

एचटीएमएल:

<div id="contact_us"> <!-- BEGIN CONTACT US --> 
    <span class="first_title">Contact</span> 
    <span class="second_title">Us</span> 
    <p class="content">For any questions whatsoever please contact us through the following e-mail address:</p></br></br> 
    <p class="e-mail">info@e-mail.com</p></br></br></br></br> 
    <p class="read_more"><a href="underconstruction.html">Read More</a></p> 
</div> <!-- END CONTACT US --> 

सीएसएस:

span.first_title { 
    margin-top: 20px; 
    margin-left: 12px; 
    font-weight: bold; 
    font-size: 24px; 
    color: #221461; 
} 

span.second_title { 
    margin-top: 20px; 
    font-weight: bold; 
    font-size: 24px; 
    color: #b8b2d4; 
} 

Answer 1

div के विपरीत, p जो Block Level तत्व है जो सभी पक्षों पर margin तक लग सकते हैं, कर रहे हैं span कर सकते हैं यह एक Inline तत्व है जो क्षैतिज केवल मार्जिन लेता है के रूप में नहीं।

specification से:

मार्जिन गुण एक बॉक्स के मार्जिन क्षेत्र की चौड़ाई निर्दिष्ट करें। 'मार्जिन' शॉर्टेंड संपत्ति सभी चार पक्षों के लिए मार्जिन सेट करती है जबकि अन्य मार्जिन गुण केवल अपने संबंधित पक्ष को सेट करते हैं। ये गुण सभी तत्वों पर लागू होते हैं, लेकिन लंबवत मार्जिन में गैर-प्रतिस्थापित इनलाइन तत्वों पर कोई प्रभाव नहीं होगा।

Demo 1

समाधान (कार्यक्षेत्र marginspan के रूप में लागू नहीं एक inline तत्व है)? अपना span तत्व, display: inline-block; या display: block; बनाएं।

Demo 2

आप display: inline-block; उपयोग करने के लिए के रूप में यह inline रूप में अच्छी तरह हो जाएगा block के रूप में सुझाव है चाहेंगे। यह बनाना केवल अपने तत्व में परिणाम होगा blockon another line रेंडर करने के लिए, के रूप में block स्तर तत्वों पृष्ठ पर क्षैतिज अंतरिक्ष के 100% लेते हैं, जब तक कि वे inline-block बना रहे हैं या वे left या right को floated हैं।

---

^{1. Block Level Elements - MDN स्रोत}

^{2।Inline Elements - MDN संसाधन}

Answer 2

span एक इनलाइन तत्व यह है कि खड़ी मार्जिन का समर्थन नहीं करता है। मार्जिन को इसके बजाय बाहरी div पर रखें।

Answer 3

span तत्व डिफ़ॉल्ट रूप से display:inline; आप इसे inline-block या block

इस

span.first_title { 
    margin-top: 20px; 
    margin-left: 12px; 
    font-weight: bold; 
    font-size:24px; 
    color: #221461; 
    /*The change*/ 
    display:inline-block; /*or display:block;*/ 
} 

Answer 4

लगता है कि आपने कुछ विकल्प याद किया, करने की कोशिश की तरह बनना अपने सीएसएस परिवर्तन करने की आवश्यकता है जोड़ें:

position: relative; 
top: 25px;