Source of Whitespace Within `` Element at Bottom of Basic Webpage

Question

Could anyone shed some light upon the source of the 8px whitespace at the bottom of the element box when inspected with DevTools?

/* No stylesheet - all CSS from DevTools on Chrome user agent stylesheet */

element.style {}

html {
  display: block;
}

head {
display: none;
}

body {
  display: block;
  margin: 8px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

<html>

<head></head>

<body>
  <p>Hello, world</p>
</body>

</html>

Highlighting the <html> element box with DevTools shows its vertical dimension to be 189px:

Highlighted <html> element Box

Devtools View

Whilst from DevTools, the highlighted <body> element box has a total vertical dimension of 181px (including margins).

Highlighted <body> element Box

Devtools View

Why does the <html> element box extend down by 8px beyond the <body> element box at the bottom of the page?

Issue is now resolved. The extra whitespace was not caused by the default `` element margin settings, but instead by the default user agent stylesheet margin settings on the `
` element (as can be seen in my posted codesnippet). Hence, setting body margins to 0 would not have solved the issue. — , Sep 08 '22 at 16:49

score -1 · Answer 1 · answered Sep 08 '22 at 14:14

-1

Browsers come with a surprising amount of CSS by default, which we call user-agent stylesheets. These styles are the reason that, without any CSS on our part, an <h1> is bigger than an <h2>, and why the <body> has a margin on it that we tend to always remove.
a

Like Kevin Powell writes on freecodecamp, it's quite normal to the following at the start of a new project.

body {
  margin: 0;
}

answered Sep 08 '22 at 14:14

jna

926
10
18

Thanks for that jna. I can understand the default margins for the `` element. I'm just not sure I understand why there is whitespace within the `` element box at the bottom only, below the limits of the lowermost `` element margin. – Sep 08 '22 at 15:18
It assume it has to do with collapsing margins. It's probably the margins on your
doing it
– jna Sep 08 '22 at 21:46

score -2 · Answer 2 · answered Sep 08 '22 at 13:53

-2

Its called default margin set by the browser . If you want to reset everything to zero you can use

*{margin:0; padding:0;}

answered Sep 08 '22 at 13:53

UmairFarooq

1,269
1
3
8

1

No need to do this for every element. body { margin: 0 } should be sufficient. – jna Sep 08 '22 at 14:03
This is a heavy-handed strategy that can have negative consequences on many elements. – isherwood Sep 08 '22 at 15:48

Source of Whitespace Within `` Element at Bottom of Basic Webpage

2 Answers2