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.
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.
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.