सीएसएस मार्जिन जोड़ते हैं या संयुक्त होते हैं?

Question

मान लेते हैं कि हम निम्न कोड करते हैं:

<div style="margin-bottom:100px;">test</div> 
<div style="margin-top:100px;">test</div> 

मुझे लगता है कि कभी कभी यह तत्वों के बीच मार्जिन के 100px बनाता है और कभी कभी यह 200px है (जब हम कुछ सेटिंग है कि मैं से परिचित नहीं हूँ का उपयोग करें) देखा। मुझे विनिर्देशन में इसके बारे में कोई जानकारी नहीं मिल रही है। यह किस पर निर्भर करता है?

यदि हमारे पास h1 और p रिक्त दस्तावेज़ में है तो h1 का मार्जिन p के मार्जिन के साथ जोड़ा जाएगा। वे जोड़ नहीं पाएंगे। जो भी बड़ा हो, उसका उपयोग किया जाएगा।

Answer 1

ऐसा इसलिए हो रहा है क्योंकि आपके मार्जिन को ध्वस्त करने की अनुमति है। कुछ मार्जिन ओवरलैप हो सकते हैं (ज्यादातर तत्वों को अवरुद्ध कर सकते हैं) और गणना किए गए तत्व शैली नियमों में परिभाषित दो मानों के बड़े पैमाने पर परिभाषित संयुक्त मार्जिन बनाते हैं - यही वह हो रहा है। This sectionCSS Box Model दस्तावेज़ से यह विस्तार से बताता है।

संपादित करें: ब्याज की एक बिंदु के रूप में, आप कई तरीकों से

• में यह आसपास पहुंच सकते हैं चीजों को तोड़ने के बिना तत्वों बनाना (यानी सिमटने मार्जिन टूट गया।) (बहुत ?) width: 100%; display: inline-block
• height: 0; width: 0; overflow: hidden तत्वों के बीच में अवरुद्ध करना और इसमें एक बिंदु या कुछ डालना।

मैंने प्रदर्शित करने के लिए एशले के fiddle को फोर्क किया। संभवतः अन्य विधियां हैं लेकिन यदि आपको आवश्यकता हो तो ये लगभग ढहने योग्य मार्जिन प्राप्त करने के लिए एक गंदे तरीके हैं।