html - leaking margin: unexpected offset due to nested DIVs -
I have some unexplained strangeity with the margin of nested divis, which is "leak" from the original container.
The outer shell (red) does not start from very high -
Unless there is a text node or overflow: auto;
On that element (tested on Firefox and Safari.)
However overflow allows me to work on this issue, I would love to know why this is happening in the first place . No insights will be appreciated!
& nbsp; * This is the least test case, except the script below, which only shows the workaround
Why this is not working is that your vertical margin is being covered in CSS, which is the expected behavior.
Remove the margin from # to get the desired result
, and instead padding: 50px; Specify your
#outer
:
* {margin: 0; Padding: 0; } Body {color: white; Background color: blue; } #outer {padding: 50px; Background color: red; } #inner {background color: green; }
For more information about collapsing vertical margins, I recommend you read the following article:
Comments
Post a Comment