A weird spacing appears when I use margin property

2019-01-20 19:24发布

站内文章 / HTML/CSS
41 0 0

问题:

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 :

And JSFiddle : http://jsfiddle.net/9vQZ9/1/

回答1:

add this:-

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


回答2:

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

body {
margin: 0;
padding: 0;
}


回答3:

Demo Fiddle
CSS

body{
    margin:0;
    padding:0;
}

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

*{
    margin:0;
    padding:0;
}


标签： html css margin
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~