भाई तत्वों के बीच मार्जिन पतन को कैसे अक्षम करें

Question

शायद यह बहुत बेवकूफ और प्रसिद्ध चाल है, लेकिन मुझे अभी तक कोई फिक्स नहीं मिला है। मैंने कोशिश की है "overflow", "content: ' '; display: table;", padding और 1pxborder। कोई सफलता नहीं। इसलिए मैंने इस समस्या के लिए छोटा उदाहरण बनाया है।

2 ब्लॉक तत्व हैं: शीर्ष मार्जिन के साथ शीर्ष मार्जिन और पाद लेख वाला शीर्षलेख। कार्य मार्जिन को एक साथ जोड़ना है: 50 + 49 = 99 पीएक्स!

.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

Answer 1

आप flexbox उपयोग करें, क्योंकि यह collapsing margins नहीं है हो सकता है।

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<div class="content"> 
 
    <header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
    </header> 
 

 
    <footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
    </footer> 
 
</div>

Answer 2

प्रारंभ करने के लिए flexbox solution that @Nenad Vracar तैनात सबसे अधिक मान्य है।

---

विकल्प
समस्या मानते हुए की एक जोड़े है कि आप अगर वहाँ आप इस मामले (के लिए एक अतिरिक्त का भी उपयोग कर सकता है दो टैग के बीच कुछ है, हालांकि यह केवल पाठ करता है, तो विफल हो जाएगा पता नहीं है है दो टैग के बीच है, क्योंकि यह अभी भी 99 मार्जिन)

.main-header + .main-footer{margin-top:99px;}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

से लागू होगा

---

अब, आपकी स्थिति के आधार पर आप जिन युक्तियों का उल्लेख करते हैं उनका उपयोग कर सकते हैं और छद्म तत्वों को मार्जिन पास कर सकते हैं।

.main-header:after { 
 
    content: ''; 
 
    margin-bottom: 50px; 
 
    display: table; 
 
} 
 

 
.main-footer:before { 
 
    content: ''; 
 
    display: table; 
 
    margin-top: 49px; 
 
} 
 

 
.main-header, 
 
.main-footer { 
 
    overflow: auto; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

Answer 3

वहाँ के रूप में adjacent siblings और के बाद से मार्जिन पतन उच्च मार्जिन लेता है, हम + सीएसएस ऑपरेटर के उपयोग इतना है कि जब वहाँ header और footer के बीच कोई अन्य तत्वों है, हम वृद्धि कर margin-topfooter से 99px

JS Fiddle

.main-header { 
 
    margin-bottom: 50px; 
 
    background-color: orange; 
 
} 
 
.main-footer { 
 
    background-color: skyblue; 
 
    margin-top: 49px; 
 
} 
 
.main-header + .main-footer { 
 
    /* only when there's no other elements between header and footer this will be applied */ 
 
    margin-top: 99px; 
 
}

<header class="main-header">HEADER Lorem ipsum dolor.</header> 
 

 
<footer class="main-footer">FOOTER <span>&copy;2015 Lorem ipsum dolor.</span></footer>

Answer 4

आप एक सरल float और clear:both, ::before और ::after छद्म तत्वों का उपयोग जोड़ सकते हैं।

प्रति MDN के रूप में:

मार्जिन गिर तीन बुनियादी मामलों में होता है:

सटे भाई बहन आसन्न भाई बहन के हाशिये ढह रहे हैं (छोड़कर जब बाद में भाई की जरूरत है अतीत तैरता, हटाए जाने की)।

.main-header::after, .main-footer::before { 
 
    content:''; 
 
    float:left; 
 
    width:100%; 
 
    clear:both; 
 
} 
 

 
.main-header::after { 
 
    margin-bottom: 50px; 
 
} 
 

 
.main-footer::before { 
 
    margin-top: 49px; 
 
}

<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

Answer 5

आप उन्हें पूरी चौड़ाई पर कब्जा करने के बजाय सामग्री द्वारा निर्धारित बनाने के लिए width:100% साथ टूट मार्जिन निष्क्रिय करने के लिए, उन्हें तैर सकते हैं।

.main-header, 
 
.main-footer { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>