HTML定位中的奇怪差距

Question

（在上面的屏幕截图中，绿色线条后来由MS Paint绘制，仅用于描述问题。）

代码：

<style>#left{float:left;width:100px;background:red;height:100%}</style>
<div id="left">SS</div>

因为你可以看到图片中有一个奇怪的间隙，它在左边没有完全对齐。

为什么会这样？怎么解决？

Answer 1

在body中，默认保证金为 8px 。

您可以删除默认保证金：

body {
  margin: 0px;
}

Answer 2

尝试使用CSS重置文件，例如YUI Css Reset：

  

基础CSS重置删除了浏览器提供的HTML元素的不一致样式。这创造了一个可靠的平坦基础来建立。加载CSS重置后，编写项目所需的显式CSS。

Answer 3

将css文件中的margin设置为0作为主体默认值：

body{
    margin: 0;
}

在您的情况下，保证金可能由您的浏览器默认值定义。

Answer 4

http://meyerweb.com/eric/tools/css/reset/

将此代码复制到您的CSS。它将删除默认的浏览器设置。