如何摆脱网页顶部的空白？ [复制]答案

【问题标题】：How do I get rid of the white space at the top of my web page? [duplicate]如何摆脱网页顶部的空白？ [复制]
【发布时间】：2015-04-15 23:15:15
【问题描述】：

如何消除页面顶部的空白？

我尝试过 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>

【问题讨论】：

标签： html css whitespace

【解决方案1】：

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

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

【讨论】：

我的猜测是你的意思是让#inner-container 有填充来扩展黑色背景，而不是偏移整个元素？

【解决方案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>

【讨论】：