Why Chrome add margin to body element?

Question

I have simple html document. Is one element into body. When I set margin-top in div element, Chrome add the same margin to body.
Margin is visible only developer tools. My code:

<html>
<body>
<div id="main">Test</div>

<style>
body { background-color: red; }

#main { background-color: blue; margin-top: 100px; }
</style>
</body>
</html>

possible duplicate - https://stackoverflow.com/q/7742720/104380 — vsync, Aug 16 '17 at 08:03
possible related - https://stackoverflow.com/q/2680478/104380 — vsync, Aug 16 '17 at 08:03
possible related - https://stackoverflow.com/a/33818444/104380 — vsync, Aug 16 '17 at 08:04
possible duplicate - https://stackoverflow.com/q/26311891/104380 — vsync, Aug 16 '17 at 08:05
...Did you check other browsers before declaring this is a Chrome-related issue? — vsync, Aug 16 '17 at 08:06

score 1 · Answer 1 · answered Aug 16 '17 at 08:01

A HTML web document has default css styles, these values are defaulted if you haven't applied any styles of your own. You can override them by applying styles on those particular elements.

for instance, applying the below style, body tag loses its default css style

body{
   margin:0;
}

score 0 · Answer 2 · answered Aug 16 '17 at 08:01

0

Set the following style to body tag.

body {
    margin: 0;
    padding: 0;
}

Here is the jsfiddle link.

answered Aug 16 '17 at 08:01

kmg

499
3
16

score 0 · Answer 3 · answered Aug 16 '17 at 08:05

Your code looking right.(ı tried to change margin block number and it worked)

Any code on the top maybe affect your margin block.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div id="main">Test</div>

<style>
body { background-color: red; }

#main { background-color: blue; margin-top: 100px; }
</style>

</body>
</html>

Why Chrome add margin to body element?

3 Answers3

Linked