如何去掉网页顶部的白色 space？

Question

如何去除页面顶部的白色 space？

我已尝试 css 重置、删除

标签、更改 <body>、<html> 和 <div> 边距，但似乎没有任何效果。

<html>
    <head>
        <title>Title</title><meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {
                margin: 0;
                padding: 0;
            }

            #container {
                background-color: black;
                color: white;
                width: 800px;
                margin-top: 0px;
                margin-bottom: 0px;
                margin-left: auto;
                margin-right: auto;
            }
            #inner-container {
                margin: 10px 10px 10px 10px;
            }
            p {
                margin-top: 0px;
            }

        </style>
    </head>
    <body><div id="container"><div id="inner-container">
                    <p>Body Text</p>
            </div></div></body></html>

Answer 1

您的空白来自#inner-container 上 10 像素的上边距。请参阅此 JSFiddle，上边距更改为 0px：https://jsfiddle.net/rcz6ksft/.

#inner-container {
    margin: 0px 10px 10px 10px;
}

Answer 2

您需要移除子元素的边距，因为如果它们靠近网站边缘，它们会产生白色间隙。我已将页边距更新为填充。这将产生相同的效果，但该元素将一直延伸到页面边缘。

            html, body {
                margin: 0;
                padding: 0;
            }

            #container {
                background-color: black;
                color: white;
                width: 800px;
                margin-top: 0px;
                margin-bottom: 0px;
            }
            #inner-container {
                padding: 10px 10px 10px 10px;
            }
            p {
                margin-top: 0px;
            }

<div id="container">
    <div id="inner-container">
        <p>Body Text</p>
    </div>
</div>

如何去掉网页顶部的白色 space？

How do I get rid of the white space at the top of my web page?

html

css

whitespace