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

Question

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

HTML :

<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">[e-mail]</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 ¹ जो कि ब्लॉक स्तर के तत्व हैं जो marginसभी पक्षों पर लग सकते हैं , span² नहीं कर सकते क्योंकि यह एक इनलाइन तत्व है जो केवल क्षैतिज रूप से हाशिये पर ले जाता है।

से विनिर्देश :

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

डेमो 1 ( एक तत्व के marginरूप spanमें लंबवत लागू नहीं है inline)

उपाय? अपना spanतत्व बनाओ , display: inline-block;या display: block;।

डेमो 2

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

---

^{1. ब्लॉक स्तर के तत्व - एमडीएन स्रोत}

^{2. इनलाइन एलिमेंट्स - एमडीएन रिसोर्स}

Answer 2

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

position: relative;
top: 25px;

Comments

हालांकि यह सवाल का जवाब नहीं देता है, लेकिन समस्या का एक अच्छा समाधान है!

— ब्रूस

सही समाधान

— Akitha_MJ

Answer 3

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

Answer 4

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 5

एक बात हमेशा याद रखें हम मार्जिन इनलाइन तत्वों को लागू नहीं कर सकते हैं, यदि आप आवेदन करना चाहते हैं तो इसके डिस्प्ले प्रकार को ब्लॉक या इनलाइन ब्लॉक में बदल दें। उदाहरण के लिए स्पैन {इनलाइन: इनलाइन-ब्लॉक;