HTML element's bottom margin in Firefox

HTML & CSS
1

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

https://codepen.io/mori79/pen/zYPMYjx

Is it a bug?

2

It’s always been like that in Firefox. I’m not sure if its a bug or just undefined behaviour.

It doesn’t really may a lot of sense to put a margin on the html element anyway as there is no element outside the html for it to take effect. The problem is easily solved by either using padding on the html element or margin on the body instead.

html {
  padding:1rem;
  background: green;
}
body {
  margin: 0;
  min-height: 1200px;
  background: tan;
}

Or:


html {
  margin:0;
  background: green;
}

body {
  margin: 1rem;
  min-height: 1200px;
  background: tan;
}

or:


html {
  margin:0;
  border:1rem solid green;
}
body {
  margin: 0;
  background: tan;
  min-height:1200px
}

The root element (html) has special properties and margins should not collapse on the root element and backgrounds are propagated from the body element to the html element by default if no backgrounds are applied to the html element. Therefore in general terms its best to leave the html element alone as much as possible and use the body element instead.

Note that a fixed height:1200px is not a realistic measurement and you should never do that in a real layout as it is meaningless. If you want viewport height then use the vh unit but don;t use height as that will limit it. Use min-height instead e.g. (min-height:100vh)

2 Likes
3

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