आमतौर पर, सीएसएस में, जब माता-पिता और उसके अंतिम बच्चे का मार्जिन होता है, मार्जिन एक मार्जिन बनाने के लिए पतन हो जाता है। जैसेफ्लेक्सबॉक्स में मार्जिन ढहने
article {
margin-bottom: 20px
}
main {
background: pink;
margin-bottom: 20px;
}
footer {
background: skyblue;
}
<div id="container">
<main>
<article>
Item 1
</article>
<article>
Item 2
</article>
</main>
<footer>Footer</footer>
</div>
आप देख सकते हैं, भले ही 20px के अंतर दोनों article
और main
टैग पर निर्दिष्ट किया जाता है, आप केवल पिछले लेख और पाद लेख के बीच एक 20px मार्जिन मिलता है।
फ्लेक्सबॉक्स का उपयोग करते समय, हमें अंतिम आलेख और पाद लेख के बीच 40px मार्जिन मिलता है - लेख से मुख्य तक एक पूर्ण 20px मार्जिन, और मुख्य रूप से 20px से मुख्य तक।
#container {
display: flex;
flex-direction: column;
}
article {
margin-bottom: 20px
}
main {
background: pink;
margin-bottom: 20px;
}
footer {
background: skyblue;
}
<div id="container">
<main>
<article>
Item 1
</article>
<article>
Item 2
</article>
</main>
<footer>Footer</footer>
</div>
वहाँ flexbox मार्जिन गैर flexbox के समान तरह से व्यवहार करने के लिए एक तरीका है?
nnnnnooooooooooooooo मुझे यह मत कहो! मैं मॉड्यूल के बीच अपने अतिरिक्त स्थान से कैसे छुटकारा पा सकता हूं? –
@TomRoggero शायद ब्लॉक स्वरूपण संदर्भ में काम करने के लिए उस सामग्री के लिए एक रैपर जोड़ें? तब रैपर एक फ्लेक्स स्वरूपण संदर्भ में मौजूद है, लेकिन इसकी सामग्री नहीं - मुझे लगता है। हालांकि, रैपिंग अच्छा, अच्छा, अर्थपूर्ण मार्कअप तोड़ने के लिए जाता है। –