A weird spacing appears when I use margin property

2019-01-20 19:27发布

My HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>LOL</title>
  </head>
  <body>
    <div id="one"></div>
  </body>
</html>

CSS :

div {
  background: yellow;
  width: 77px;
  height: 77px;
  border: 1px dotted red
  }

#one {
  margin: 0px 21px 41px 41px
  }

My margin-top value is 0px, nevertheless, a spacing beetwen my square and the top of the page appears.

Why?
Here is an illustration :

enter image description here

标签： html css margin

3条回答

2楼-- · 2019-01-20 19:27

Demo Fiddle
CSS

body{
    margin:0;
    padding:0;
}

Check it in FireBug

Many designers even use, to reset padding and margins of all elements, if any

*{
    margin:0;
    padding:0;
}

0人赞添加讨论(0) 举报

3楼-- · 2019-01-20 19:28

This is browser's body default CSS which is margin:8px; To rewrite that, use this CSS as well:

body {
margin: 0;
padding: 0;
}

0人赞添加讨论(0) 举报

4楼-- · 2019-01-20 19:51

add this:-

html,body{ margin:0; padding:0;}

0人赞添加讨论(0) 举报