0

我不明白，为什么在运行以下代码时会出现浏览器的垂直滚动条：

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <h1>some text</h1>

  </body>
</html>

这是一个活生生的例子 - http://codepen.io/anon/pen/jlfCv

当我将<h1>元素更改为<div>元素时，它们会消失。

我错过了什么？:-)

谢谢！

4

2 回答 2

3

h1 元素有边距。当两个元素彼此相邻并形成一个取最大值大小的边距时，边距会折叠。在这种情况下，您将主体的边距设置为零，但 h1 边距仍然存在。由于 h1 元素是 body 的一部分，它会推动视口的顶部，这也会将 body 元素向下推。

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing http://www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2013-07-20T18:44:14.720 回答
1

只需添加此 CSS 规则：

h1 {
   margin: 0;
}

检查此演示

出现问题是因为默认情况下UA 样式表margin会向某些元素（如元素）添加 a。h1

于 2013-07-20T18:42:13.513 回答