新手上路，请多包涵

我的页面顶部有大约 20 像素的空白区域。我已经检查了每个元素，并且该区域没有任何填充或边距。当我检查 body 元素时，它不包括这个空间。当我检查 html 元素时确实包含这个空间。另外，如果我删除

<!DOCTYPE html>

空白消失了。

这是我的主要布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>

原文由 dan_vitch 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css asp.net-mvc-4 razor

阅读 1.2k

2 个回答

得票最新

社区维基

发布于
2022-10-10

✓ 已被采纳

在您的网站样式表顶部添加一个 css 重置，不同的浏览器呈现一些默认边距和填充，也许外部样式表也会做一些您不知道的事情，一个 css 重置只会初始化一个新的调色板可以这么说：

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

更新：改用通用选择器： @Frank 提到您可以使用通用选择器： * 而不是列出所有元素，并且这个选择器看起来在所有主要浏览器中都是跨浏览器兼容的：

 * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }