Forums

[Solved] Unwanted top margin in Firefox

A margin is appearing between my html tag and body tag but only in Firefox.

I have declared *{margin:0; padding:0} in the stylesheet and using Firefox’s developer tool shows that there is no margin or padding or margin calculated, however this problem persists.

I have found the apparent cause, but I’m uncertain as to the reason.

I have a nested div within a container, and this div has a margin:20px 0px;

When this margin is set, it also creates a 20px margin between html tag and body tag and likewise if removed.
However, adding padding to the adjacent sibling of body tag (a nav tag) removes this unwanted margin.

Why is this?

I realise the obvious solution is to either add padding to the nav or remove the margin from the nested div, but this would be papering over the cracks and doesn’t deal with the issue at hand, it also messes with how my layout should look

I can somewhat explain why, but I still haven’t figured out why it’s needed. The display: inline-block changes the block formatting context of nav. The same results are true if you use display: table, or don’t change the display at all, but add overflow:hidden to #top (all of which change the BFC). Normally a margin would be protruding out the top of nav, and then #container, and again body; but there’s no top margins – I can’t find why it’s happening. I have seen this before however, and I just used the overflow: hidden to correct it.