0

Just:

<html>
<head></head> //there is content in here
</html>

by itself shows html has a height of 8px (according to Chrome). Why is this?

enter image description here

enter image description here

tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • Where are you seeing it has a height of 8px? – j08691 Sep 14 '20 at 19:36
  • Does this answer your question? [Why is there a gap on the top of my webpage?](https://stackoverflow.com/questions/6475883/why-is-there-a-gap-on-the-top-of-my-webpage) – disinfor Sep 15 '20 at 18:31

3 Answers3

4

In most browsers including Chrome the body element has margin:8px by default. This is what you see.

It is only 8px and not 16px (8px top + 8px bottom added together) because of collapsing margins. There is no content so the top and bottom margins are "collapsing" together.

A body element is added automatically even though you didn't put it in your HTML, if you inspect it in Chrome you will see it and also where the user agent stylesheet is adding the 8px:

Chrome inspector

If you inspect this snippet, the height will be 0:

body { margin:0;}
<html>
  <head>
  </head>
</html>

Or inspect this snippet and the height will be 20px;

body { margin: 20px 0 0 0;}
<html>
  <head>
  </head>
</html>
user1601324
  • 297
  • 1
  • 11
  • Thanks @user1601324 I didn't even see that Chrome had automatically added in a `body` for me! – tonitone120 Sep 14 '20 at 19:47
  • @tonitone120 Yes Chrome tries to fix "broken" html. I had added a screen image of the inspector for your code in Chrome so you can see what Chrome is doing to it. – user1601324 Sep 14 '20 at 19:57
1

That's because the application author's stylesheet for the <body> element comes with a margin of 8px (or similar). So the default of the <body> element (which is a mandatory element and, thus, will automatically be added by the browser) will look like this:

<html>
  <head>
    <title></title>
  </head>
  <body style="margin: 1ex;">
  </body>
</html>

PS: The default style of margin: 1ex; may alternatively be added to the <html> element itself. It depends on the browser manufacturer's preference.

AxD
  • 2,714
  • 3
  • 31
  • 53
  • Thanks @AxD, are you using `ex` unit as presented here? (https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) – tonitone120 Sep 14 '20 at 19:44
  • 1
    Yes. That's because usually `ex`/`em` length values are used instead of `px` length values because they scale along when the user changes the webpage zoom. – AxD Sep 15 '20 at 10:07
-1

I am not sure but I think that Chrome might just assign a default value because once I was doing something with rows where I needed to put floating-left, and I didn't so in chrome and on mozilla would look different

EustakiosPower
  • 1