Menu
Take this HTML. If you take out that "border: 1px solid" from the yellow box, its size changes a lot (it shrinks considerably).
...why?
UPDATE: If I change the p as inline-block, the size stays the same. So, that p tag seems to be the problem... but why would a border in the outer div make an inline tag change its size so dramatically?
<body style="height:100%">
<div style="background-color: red; border-style:solid;">
<div style="background-color: yellow; border:1px solid;">
<p>Inside</p>
</div>
<p>Something</p>
</div>
<div style="background-color: blue; border-style:solid;">
<p>Something else </p>
</div>
</body>
Demonstration: http://jsfiddle.net/C2D49/
941
Here you go :-
Margin Collapsing
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats). For example:
<p>The bottom margin of this paragraph is collapsed...</p>
<p>...with the top margin of this paragraph.<p>
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Have a look at this fiddle- It doesnt collapse now after adding just a couple of spans. http://jsfiddle.net/aPaBy/
<div style="background-color: red; border-style:solid;">
<div id="test" class="border" style="background-color: yellow;">
<span>hi</span>
<p>Inside <button>Test</button></p>
<span>hi</span>
</div>
<p>Something</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
