Question

如何摆脱页面顶部的空白区域？

我尝试过css重置，删除＆lt; p＆gt;标签，更改<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的10px的上边距。看到这个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>

如何摆脱网页顶部的空白区域？

2 个答案: