HTML not 100% left

Question

My black box in this example should be all the way to the left and all the way up. I don't want to see any white space left or above of it.

#box {
  width: 200px;
  height: 200px;
  margin-left: 0px;
  background-color: black;
}

<div id="box"></div>

But that isnt the case! Can anyone tell me how I can achive this?

You should set padding and margin for html and body to 0. Normally, I will use css reset tool before starting a project — dnp1204, Mar 20 '18 at 17:05

score 2 · Accepted Answer · answered Mar 20 '18 at 17:03

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

You need to give margin:0 to body like this

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

<body>
  <div id="box"></div>
</body>
<style>
  #box {
    width: 200px;
    height: 200px;
    margin-left: 0px;
    background-color: black;
  }
</style>

P.S Also set padding to 0 for both html and body

score 1 · Answer 2 · answered Mar 20 '18 at 17:04

1

You need to add 0 margin to body and html as well

body, html{
margin:0;
}
#box{
 width: 200px;
 height: 200px;
    margin-left: 0px;
 background-color: black;
}

<body>
 <div id="box"></div>
</body>

answered Mar 20 '18 at 17:04

Özgür Ersil

6,909
3
19
29

score 1 · Answer 3 · answered Mar 20 '18 at 17:04

1

You also need to remove the default margin on the body element.

#box {
  width: 200px;
  height: 200px;
  margin-left: 0px;
  background-color: black;
}

body {
margin:0;
}

<div id="box"></div>

answered Mar 20 '18 at 17:04

j08691

204,283
31
260
272

HTML not 100% left

3 Answers3