CSS设置黑色盒子居左上仍有留白，如何实现无留白效果？

嘿，这个坑我踩过好多次！你之所以没达到预期，是因为绝大多数浏览器会给<html>和<body>标签默认加上margin或padding——哪怕你给盒子设了margin-left: 0，父元素的默认留白还是会把盒子挤得偏离左上角。

下面给你两种靠谱的解决方案：

方案一：清除根元素的默认边距（最常用） #

直接把<html>和<body>的默认内外边距清零，这样你的盒子作为块级元素就会自动贴住页面左上角。完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 先清除html和body的默认样式 */
        html, body {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

方案二：用绝对定位强制固定位置 #

如果你的盒子不是页面的第一个元素，或者需要它不受其他元素影响始终贴在左上角，可以给盒子加上绝对定位：

#box {
    width: 200px;
    height: 200px;
    background-color: black;
    /* 绝对定位，相对于html元素定位 */
    position: absolute;
    top: 0;
    left: 0;
    margin: 0; /* 保险起见清除自身边距 */
}

这种方式会让盒子脱离正常文档流，直接固定在页面的左上角，不管其他元素怎么布局都不会影响它。

内容的提问来源于stack exchange，提问作者Buzzet