html页面缩小后顶部空白,html-pag顶部的空白

html-pag顶部的空白

我的页面顶部有大约20像素的空白。 我检查了每个元素，在此区域中没有填充或空白。 当我检查身体元素时，它不包含该空间。 当我检查html元素时是否包含此空间。 另外，如果我删除

白色空间消失了。

这是我的主要布局

Title

@RenderSection("Css", false)

@RenderSection("JavaScript", false)

9个解决方案

55 votes

在网站样式表的顶部添加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;

}

Brian Ogden answered 2020-07-12T00:12:28Z

4 votes

试试这个

html,

body {

margin: 0;

padding: 0;

height: 100%;

}

mdesdev answered 2020-07-12T00:12:48Z

3 votes

老问题，但我碰到了这个问题。 有时您的文件是UTF-8开头的BOM表，而您的模板引擎对此并不满意。 因此，当包含模板时，您会在页面中插入另一个(不可见的)BOM。

这会在页面的开头导致间隙，浏览器在此处呈现BOM，但对您而言它是不可见的(并且在检查器中，它仅显示为空格/引号。

将模板文件另存为UTF-8(不带BOM)，或更改模板引擎以正确处理UTF8 / BOM文档。

rocketmonkeys answered 2020-07-12T00:13:17Z

3 votes

除了CSS重置之外，我还将以下内容添加到了div容器的CSS中，并对其进行了修复。

position: relative;

top: -22px;

David Hernandez answered 2020-07-12T00:13:37Z

1 votes

如上所述，获得空白可能有很多原因。假设如果您的HTML实体中的div元素为空，也会导致该错误。

例

删除HTML实体

Praveen M P answered 2020-07-12T00:14:05Z

1 votes

如果以上方法均无济于事，请检查是否在某些(以下某些级别)嵌套的DOM元素上设置了margin-top。

当您在调试器中检查margin-top元素本身时，将无法识别它。 仅当您在Chrome Dev Tools元素调试器中展开在padding-top个元素中嵌套的多个元素并检查是否设置了body个元素时，该元素才可见。

当您检查margin-top标签时，以下是网站屏幕截图的上部以及相应的Chrome Dev Tools视图。

这里没有顶部空白的迹象，并且您已经按照上面的答案重新启动了所有特定于浏览器的CSS属性，但是仍然有不需要的空白。

下面是检查正确的嵌套元素时的视图。 可以清楚地看到上面有橙色的margin-top。 这是导致padding-top元素顶部出现空白的原因。

在找到的元素上，如果您需要在其上方有空间但又不希望其泄漏到body标签上方，则用296243961272519981998替换margin-top。

希望有帮助:)

bob-12345 answered 2020-07-12T00:14:53Z

0 votes

检查是否有任何适用于ul，h4等元素的webkit样式。对我而言，这是导致此前后的空白。

-webkit-margin-before: 1.33em;

-webkit-margin-after: 1.33em;

Beetny answered 2020-07-12T00:15:13Z

0 votes

溢出：自动

在2962440740540539991040标签上使用overflow: auto是更清洁的解决方案，并且会很吸引人。

gilbert-v answered 2020-07-12T00:15:37Z

-2 votes

我只是将CSS放入现在可以在代码中工作的

中

position: relative; top: -22px;

Siddharth Shukla answered 2020-07-12T00:15:57Z