先上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>

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

<style>
    html{
        background-color: black;
    }
    body{
        height: 300px;
        background-color: darkgoldenrod;
        /* padding: 0px; */
        /* margin: 0px; */
        /* border: 0px; */
    }
    .box{
        background-color: brown;
        width: 100%;
        height: 200px;
    }
</style>
</html>

页面效果如下：
在这里插入图片描述
这里黑色是html，可以看到是占满整个页面的，暗金色是body标签，红色是div标签
从上面可以看出，body标签是有默认外边距的
额。。控制台更容易看出默认外边距为8
在这里插入图片描述
因此，想要消除顶部和左右两侧的留白，就需要消除body的默认外边距，即

margin: 0px;

网上很大一部分是

padding: 0px;
margin: 0px;
border: 0px;

是考虑到内边距和边框是否有值的问题。

话题之外：
当我把html的背景色注释掉以后，会发现整个页面都变成了暗金色，这里body的margin为8并没有清除，而是当html不设置背景色时，body的背景将作为整个页面的背景色。从控制台看margin依旧是那个margin。

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

自考党必看！8个降AI率工具高效避坑指南

avatar 2048 AI社区
cover

MBA必看！9个降AI率工具高效避坑指南

avatar 2048 AI社区

IDM插件开发：创意与技术的完美碰撞

本文介绍了IDM（Internet Download Manager）插件开发创意赛的技术框架与参赛指南。赛事旨在通过创新插件开发提升下载体验，重点考察技术实现、创意性和实用性。文章详细解析了开发流程：从SDK获取、开发环境搭建到核心功能实现（协议扩展、任务调度优化等），并提出了AI推荐下载、云存储集成等创新方向。同时涵盖了调试技巧、兼容性处理及作品提交要求，为开发者提供从技术实现到参赛评审的全流

avatar 2048 AI社区