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 要素にはマージンがあります。2 つの要素が隣り合っている場合、余白は崩壊し、最大値のサイズを取る 1 つの余白を形成します。この場合、ボディのマージンをゼロに設定しますが、h1 マージンはまだそこにあります。h1 要素はボディの一部であるため、ビューポートの上部に押し付けられ、ボディ要素も押し下げられます。

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が一部の要素 (h1要素など) にデフォルトで a を追加するために発生しました。

于 2013-07-20T18:42:13.513 に答える