关于HTML两侧留白的解决以及解决过程

最新推荐文章于 2022-04-19 13:30:14 发布

天贼

最新推荐文章于 2022-04-19 13:30:14 发布

阅读量1w

点赞数 6

分类专栏： WEB前端基础

本文链接：https://blog.csdn.net/qq_42147998/article/details/108443340

版权

WEB前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上代码：

<!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。

天贼

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
关于HTML两侧留白的解决以及解决过程

先上代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>title</title></head><body> <div class="box"> </div></body><style> html{ background-c
复制链接

扫一扫