Why is my body element smaller than my html element?

Question

all my margins and padding are 0. In the global.css file I only have this small piece of code:

html, body {
    width: 100%;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

Here you can see the highlighted part of <body>. Note the fact that the body pixel size is 1261 x 876.

In the 2nd picture you can see that the <html> part also has the same pixel size of 1261 x 876, but is highlighting the entire screen, without the white bar on top.

EDIT: I have checked the child elements inside the <body> for overflow. They had some overflow padding.

Check inside the body for an element with a margin that's overflowing its parent. See this question: [CSS margin pushing the body element](https://stackoverflow.com/questions/7742720/css-margin-pushing-the-body-element) — DBS, Aug 31 '22 at 10:42
resetcss is a good practice for these cases. https://meyerweb.com/eric/tools/css/reset/ — Helio, Aug 31 '22 at 11:07

score 0 · Answer 1 · answered Aug 31 '22 at 11:28

0

To sum up, resetcss lead me to the answer. The answer was a child overflowing the parent element.

answered Aug 31 '22 at 11:28

Beantly

36
7

Why is my body element smaller than my html element?

1 Answers1