このHTMLファイルではどのように垂直スクロールバーが表示されますか？予期せぬスクロールバー
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html, body {border:0; margin:0; padding:0; height:100%}
h1 {margin:1em}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
（又はこのjsFiddle）
体は、明らかに、ウィンドウと全く同じ高さを有します。では、コンテンツを大きくする理由は何ですか？私は何が欠けていますか？
この動作は「collapsing margins」と呼ばれます。 h1要素はbodyの最初の子要素であるため、余白を崩壊させようとし、余白はh1で、bodyタグになります。 bodyはすでに100％であるため、余白を追加するとビューポートよりも大きくなります。
しかし... ...この崩壊は、身体の余裕を増すのですか？_ああ。私は "崩壊"の定義を読み上げる必要があることを知っています。とにかくありがとう。 –
はい、それはあなたが期待していなかった結果を作り出す理由です。 :)マージンは実際にbody要素に移動されます。 – Bazzz
使用この（IE、FF、Chromeでテスト済み）：
html {border:0; margin:0; padding:0; height:100%}
body {border:0; margin:0; padding:0}
height: 100%を削除するかoverflow: hiddenを追加します。しかし注意してください - 100％は最初の画面の100％を意味します。
いいえ、私はオーバーフローを隠すことは望ましくありません。内容が実際にウィンドウより大きい場合、ドキュメントにはスクロールバーが必要です。そして、コンテンツを小さくすると、高さを削除するとバックグラウンドが乱れることになります。しかし、助けてくれてありがとう！ –
h1要素の先頭marginは、ドキュメントの先頭から計算されています。
代わりにpaddingを使用できます。
私は計算がどのように機能しているかを知っていると思いました。そして、h1は体の中にあって体は余白や詰め物がないので、h1は体に影響を与えないと思った。明らかに私は間違っていた。 –
マージンは、現在の要素と次の要素の間のスペースで、余白/マージン/境界線です。私は誰が落書きしたのか分かりませんが、コメントを残しておいて、理解してはいけないことを説明します。 – alex
あなたのh1要素のマージンは、すでに身長の100％であるあなたの体の内容を拡張しています。高さの100％を超えるとスクロールが発生しています。
「高さ」の代わりに「高さ」がこれを解決しました。 – Joey