I can’t get my head around this but with the basic div containing an inner div if you remove the border style from either of the div element then the height of the overall box is affected?!?
Can someone explain this for me please?
<div style="background-color:red;border:1px solid black;">
<div style="margin:10px;background-color:blue;border:1px solid black;">
<p style="margin:30px;background-color:gray;border:1px solid black;">test</p>
</div>
</div>
Can you guys simulate this? does the height change if you remove the border styles?
Hope someone can shed some light on this
Many thanks!
The height (and width) is determined by the total of the css width, height (or width), margin and padding. It’s call The CSS Box Model and W3Schools has a detailed explanation.