Question

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

<!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>元素时，它们会消失。

我错过了什么？： - ）

谢谢！

Answer 1

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

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

Answer 2

只需添加此CSS规则：

h1 {
   margin: 0;
}

选中此DEMO

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

将body和html标签高度设置为100％时，将显示浏览器滚动条

2 个答案: