Margin not working on html element in Mozilla

Following is my HTML and CSS code. I am posting a fiddle link

My code

Now, I have margin of 20px on html element. But, when we scroll down the result shown, there is no bottom margin present. This is how I see it on Mozilla firefox. But in Chrome and IE, I do see the bottom margin on the HTML element . So, what could be the reason ? I have latest versions of all browsers and I use Windows 8.1 as OS.

Thanks
Nerd1

I’m not sure the answer to this but am curious. I have the same results you mentioned:

*edit: it is something to do with you using html as the selector

What do you mean ? I think this is a Mozilla bug

I’m not sure the best practice here. But, I’ve never personally used styling on the HTML or BODY elements.

If you add an extra containers inside the body the margin-bottom will work. Someone might know why this happens or a work-around. From my testing of it, it is using the HTML as the selector in the CSS.

Something is really weird happening here. Only mozilla is having problem here. Chrome, IE work fine.

i didnt seen any issue on that

The HTML element should be able to be styled like any other block element, since it actually lives in another (pseudo) element called the “Initial Containing Block”, which is the actual special case (you can’t style the ICB or otherwise access it). So most likely it’s a Firefox bug. Try moving the style to the BODY element instead.

1 Like

chuck, Thats what I think too. Its a bug since I do not see the problem on Chrome and IE. How do I notify Mozilla about this ?

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.