我正在建立一个网站，在开始时我注意到底部有一个奇怪的边距。这只发生在谷歌浏览器上(当前版本:48.0.2564.97)。
我使用的唯一 css 是 normalize.css 和我在下面显示的 css，而且 html 非常简单，只有索引和一个 div with:100vh。
请注意，在 firefox 上没有这个边距，只有在 chrome 上才有。见图片(左:firefox，右:chrome):
在 chrome 上检查元素时，html 标签是唯一包含额外边距的扩展标签。 body 和 div 都以蓝色框结尾。
html:
//...
</head>
<body>
<div class="login">
<h1>Login</h1>
</div>
</body>
</html>
CSS:
html, body {
margin:0; padding:0;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.login {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100vh;
background: #cde;
}
编辑:
通过在body上设置margin-bottom: -20px;，问题就解决了。但我想更好地了解正在发生的事情，因为没有其他东西造成这种差距。
最佳答案
html, body {
margin:0; padding:0;
}
.login {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100vh;
background: #cde;
}<div class="login">
<h1>Login</h1>
</div>关于html - chrome 上的隐形边距底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35154734/