'HTML element's bottom margin in Firefox

The <html> element doesn't have a bottom margin in Firefox (version 97.0.1):

html {
  margin: 1em;
  background: green;
}

body {
  margin: 0;
  height: 1200px;
  background: tan;
}

Is it a bug?

htmlcssfirefoxmargin


Solution 1:[1]

Here, you should add the margin in the body and remove the margin from html.

html {
  margin: 0;
  background: green;
}

body {
  margin: 1em;
  height: 1200px;
  background: tan;
}

Solution 2:[2]

Since the height of the body is more then screen size your margin bottom is going below view

html {
  margin: 1em;
  background: green;
}

body {
  margin: 0 0 1em 0;
  height: 1200px;
  background: tan;
}


----------

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ghanshyam Patel
Solution 2 gcodess

Related Questions