Geek Answers Handbook

Setting the border of the containing div changes its size dramatically

Take this HTML. If you pull this “border: 1px solid” out of the yellow box, its size will change a lot (it will decrease significantly).

... why?

UPDATE If I change p as an inline block, the size will remain the same. So this p tag seems to be a problem ... but why does the border in the outer div make the inline tag change its size so much?

 <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>

Demo: http://jsfiddle.net/C2D49/

+6
source share
2 answers

Here you will find: -

Hide fields>

Adjacent siblings

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>

Parent and first / last child

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.

Empty blocks

If there is no border, padding, inline content, height, or min-height to separate a block margin-top from its margin-bottom, then its top and bottom margins collapse.

Look at this fiddle - it will not crash now after adding just a few 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>
+5
source

I think this is due to the fact that you are not doing any dumping in this ... try this ... in CSS add

 *{margin:0px;padding:0px;}

now give margins and padding as much as you want ... it will work like a charm ... give it a chance

I edited your fiddle http://jsfiddle.net/BbKED/1/

0
source

More articles:


All Articles