HTML不是100％剩下[重复]答案

【问题标题】：HTML not 100% left [duplicate]HTML不是100％剩下[重复]
【发布时间】：2018-03-20 17:02:01
【问题描述】：

我在这个例子中的黑匣子应该一直向左一直向上。我不想看到它留下或上方的任何空白。

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

&lt;div id="box"&gt;&lt;/div&gt;

但事实并非如此！谁能告诉我如何做到这一点？

【问题讨论】：

html 和 body 的 padding 和 margin 都应该设置为 0。一般情况下，我会在开始项目之前使用 css 重置工具

标签： html css

【解决方案1】：

在大多数主流浏览器中，所有边的默认边距为8px。它由您的浏览器提供的user-agent-stylesheet 以像素为单位进行定义。

你需要给margin:0这样的body

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 同时将 html 和 body 的 padding 设置为 0

【讨论】：

【解决方案2】：

您还需要将0 margin 添加到body and html 中

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

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

【讨论】：

【解决方案3】：

您还需要删除 body 元素上的默认边距。

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

body {
margin:0;
}

&lt;div id="box"&gt;&lt;/div&gt;

【讨论】：