सीएसएस मार्जिन ओवरलैप समस्या

Question

कृपया मेरा कोड देखें, मुझे नहीं पता कि इन divs के मार्जिन ओवरलैप क्यों कर रहे हैं।

<div class="alignright"> 

    <div class="social"> 
     <a href="#" class="twit"></a> 
     <a href="#" class="fb"></a> 
    </div><!-- social --> 

    <div class="contact"> 
     Get in Touch: <span>+44 10012 12345</span>    
    </div><!-- contact --> 

    <div class="search"> 
     <form method="post" action=""> 
      <input type="text" value="" name="s" gtbfieldid="28"> 
     </form> 
    </div><!-- search --> 

</div> 

सीएसएस:

.alignright {float: right} 

#header .social {margin-top: 50px;} 
#header .social a {display: inline-block;} 
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} 
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} 

#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;} 
#header .contact span {color: #FFFFFF;} 

#header .search {margin: 10px 0 0;} 

---

Answer 1

मुझे लगता है कि यह एक ढह मार्जिन है। पहले तत्व के नीचे और दूसरे के शीर्ष के बीच केवल सबसे बड़ा मार्जिन ध्यान में रखा जाता है।

यह सामान्य है कि दो अनुच्छेदों के बीच बहुत अधिक जगह नहीं है।

आप दो आसन्न तत्वों से बच नहीं सकते हैं इसलिए आपको बड़े मार्जिन को बड़ा करना या कम करना होगा।

संपादित करें: सीएफ। W3C

दो मार्जिन सटे कर रहे हैं यदि और केवल यदि:

• दोनों में प्रवाह ब्लॉक स्तर बक्से है कि एक ही ब्लॉक स्वरूपण संदर्भ में भाग लेने
• कोई लाइन बक्से के हैं, कोई निकासी, कोई पैडिंग और कोई सीमा उन्हें अलग
• दोनों खड़ी-आसन्न बॉक्स के हैं किनारों

तो float के साथ कोई ढहना नहीं है जो तत्व को प्रवाह से बाहर ले जाता है।

Answer 2

पैडिंग (जो एक विशिष्ट चौड़ाई पैड करता है) के विपरीत मार्जिन "इसे न्यूनतम दूरी के रूप में करें" है।

यह सभी तत्वों के लिए उस दूरी को नहीं रखेगा।

जैसा कि आप देख सकते हैं, संपर्क में रहें ब्लॉक नीचे मार्जिन इनपुट बॉक्स में मार्ज किया गया है। यह मार्जिन सक्रिय है। अन्य मार्जिन, इनपुट से शीर्ष मार्जिन प्रभावी नहीं है, क्योंकि यह छोटा है और यह ब्लॉक-एलिमेंट तक नहीं पहुंचता है, जहां वास्तव में तत्व तत्व को धक्का देता है। 2 मार्जिन ओवरलैप होते हैं और एक-दूसरे को प्रभावित नहीं करते हैं।

Answer 3

मैं, एक ऐसी ही सवाल था पर मेरा उत्तर के लिए: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 4

दो वस्तुओं