Question

如何删除以下额外空间？以下是我正在尝试的HTML标记。图像下方有一个间隙，但它似乎不是填充/边距。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .backcss {
                background-image: url("https://cdn.pixabay.com/photo/2013/08/25/14/40/wall-175686_960_720.jpg");
                background-color: #cccccc;
                height: 100vh;
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                display: block;
                padding: 0px !important;
                margin: 0px !important;
                background-position: center, center;
            }
        </style>
    </head>
    <body>
        <div style="display: block;" class="backcss">
            <h1 style="color:white">Hello World!</h1>
        </div>
    </body>
</html>

感谢。

Answer 1

您发布的代码中的图片下方没有填充。如果您想删除上面的填充，请尝试

body { margin:0; padding:0; }

编辑：实际上它来自h1标签所以：

h1 { margin:0; }

或更好的选择：

.backss { overflow:hidden; }

Answer 2

边距来自body元素，大多数主流浏览器都使用body元素作为默认值。只需删除body元素上的边距：身体{margin：0; }。您可以进一步参考https://necolas.github.io/normalize.css/以查看浏览器的不同之处，以及浏览器在其自己的用户代理样式表中设置的样式。

Answer 3

使用此处的代码删除边距和填充。

body {
margin:0;
padding:0;
}

或者

h1 {
margin:0;
padding:0;
}

图像下方的背景图像额外空间

3 个答案: