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 \[code\]p\[/code\] as inline-block, the size stays the same. So, that \[code\]p\[/code\] tag seems to be the problem... but why would a border in the outer div make an inline tag change its size so dramatically?\[code\]<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>\[/code\]Demonstration: http://jsfiddle.net/C2D49/
Setting border of containing div changes its size dramatically
- Thread starter maurixio
- Start date