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

最新推荐文章于 2022-05-22 20:59:49 发布

天贼

最新推荐文章于 2022-05-22 20:59:49 发布

阅读量1.1w

点赞数 7

分类专栏： WEB前端基础

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

版权

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

3 篇文章

订阅专栏

本文通过实例代码展示了如何消除HTML与Body元素的默认外边距，以避免页面顶部和左右两侧出现不必要的留白。文章解释了body标签默认具有外边距，并通过设置margin:0px;来消除这一默认样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码：

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