CSS Margin Collapse
In this page:
selector {
margin-bottom: length; /* adjacent vertical margins collapse to the larger one */
}Margin Collapsing क्या है
जब एक block element का bottom margin अगले के top margin से मिलता है, तो दोनों margins collapse होकर एक single margin बन जाते हैं जो दोनों में से बड़ी value के बराबर होता है, उनके योग के बराबर नहीं। margin-bottom: 20px वाला एक paragraph जिसके बाद margin-top: 30px वाला एक और आता है, वह सिर्फ 30px का visible gap बनाता है, 50px नहीं।
उदाहरण: What Margin Collapsing Is
<style>
.first {
margin-bottom: 20px;
background: lightblue;
padding: 8px;
}
.second {
margin-top: 30px;
background: lightgreen;
padding: 8px;
}
</style>
<p class="first">First paragraph</p>
<p class="second">Second paragraph — gap is 30px, not 50px</p>यह सिर्फ Vertically ही क्यों होता है
Margin collapsing normal document flow में block-level elements के बीच vertical (top/bottom) margins के लिए specific है; horizontal (left/right) margins कभी collapse नहीं होते और हमेशा उम्मीद के मुताबिक जुड़ते हैं, जो symmetric behavior मान लेने वाले developers के लिए confusion का एक आम कारण है।
उदाहरण: Why It Only Happens Vertically
<style>
.left {
margin-right: 20px;
background: lightblue;
padding: 8px;
}
.right {
margin-left: 30px;
background: lightgreen;
padding: 8px;
}
</style>
<span class="left">Left</span><span class="right">Right — gap adds to 50px</span>Parent-Child Collapsing
अगर किसी parent element के पास कोई border, padding, या content नहीं है जो उसे अपने पहले या आख़िरी child से अलग करे, तो child का margin सीधे parent के through collapse हो सकता है और parent के अपने box के बाहर दिख सकता है — किसी container के ऊपर unexpected spacing का यह एक common कारण है।
उदाहरण: Parent-Child Collapsing
<style>
.parent {
background: lightyellow;
}
.child {
margin-top: 40px;
}
</style>
<div class="parent">
<p class="child">Margin collapses through the parent's top edge</p>
</div>Collapsing को क्या रोकता है
दो margins के बीच कोई padding, border, या content की एक line जोड़ना उन्हें collapse होने से रोक देता है। parent पर overflow: auto (या visible के अलावा कोई भी value) set करना भी एक नया block formatting context बनाकर parent-child margin collapse को रोकता है।
उदाहरण: What Prevents Collapsing
<style>
.parent {
padding-top: 1px;
background: lightyellow;
}
.child {
margin-top: 40px;
background: lightblue;
padding: 8px;
}
</style>
<div class="parent">
<p class="child">Padding on the parent stops the collapse</p>
</div>Flexbox और Grid के साथ Collapsing
Margin collapsing सिर्फ normal-flow वाला behavior है — flex items और grid items siblings या container के साथ अपने margins कभी collapse नहीं करते, यह एक वजह है कि किसी layout को display: flex या grid में बदलना बिना किसी margin value को सीधे छुए vertical spacing को visibly बदल सकता है।
उदाहरण: Collapsing With Flexbox and Grid
<style>
.parent {
display: flex;
flex-direction: column;
background: lightyellow;
padding: 4px;
}
.child {
margin-top: 40px;
margin-bottom: 20px;
background: lightblue;
padding: 8px;
}
</style>
<div class="parent">
<p class="child">Margins never collapse inside a flex container</p>
<p class="child">Second item</p>
</div>- यह उम्मीद करना कि horizontal margins भी collapse होंगे, जबकि सिर्फ vertical margins collapse होते हैं।
- दोनों margins को जोड़ देना, जबकि बड़ी वाली value जीतती है:
20pxऔर30pxसे30pxमिलता है। - यह उम्मीद करना कि किसी parent का top margin उसके पहले child के साथ merge नहीं होगा, जबकि अगर उनके बीच कोई border, padding या clearing न हो तो ऐसा होता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: