実際はbodyが悪いわけではなくただの仕様ですが、知らないとbodyが悪いように見えます。
その1 marginが0でない
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
height: 30px;
width: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原因はブラウザのデフォルトスタイルが設定されるためです。
ブラウザのデフォルトスタイルをリセットする (1/3)|CodeZine(コードジン)
左上端にピッタリくっつけるためには明示的にmargin
を0
にしてやる必要があります。
body {
margin: 0;
}
その2 背景色が<html>要素
にも適用される
画面左側全体に青い長方形を描こうとして、以下のように記述しても何も表示されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
div {
height: 100%;
width: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<body>要素
のheight
が0
なのかと思って背景色を設定してみると、
body {
margin: 0;
background-color: antiquewhite;
}
-
background-clip
の初期値はborder-box
なのでパディング領域まで背景色が適用されるはず。 -
padding
の初期値は0
なので色がついたところがコンテンツ領域のはず。 -
box-sizing
の初期値はcontent-box
なので色が変わった部分の高さがheight
のはず。
にも関わらず<div>要素
が描画されません。結論からすると<body>要素
のheight
が0
であることが原因なのでなので、
body {
margin: 0;
background-color: antiquewhite;
height: 100vh;
}
結局何が分かっていなかったというと、
root要素
(ここでは<html>要素
)がbackground-image:none
かつbackground-color:transparent
の場合(=つまりどちらも初期値の場合=明示的に設定されていない場合)、<body>要素
の背景プロパティがroot要素
に伝播する、ということです。
参考)CSS Backgrounds and Borders Module Level 3
設定により<body>要素
だけでなくroot要素
の背景色も変わったので、あたかも<body>要素
が画面いっぱいにあると誤認したということです。
補足
最初から開発者ツールで<body>要素
の確認しておけばよかっただけ。margin:8
、height:0
であることが一目瞭然。