html、bodyタグの中でせっかくdivをwidth:100%, height:100%においてもちゃんと100%になっていないように見えることがある.周りに白い縁というか隙間ができてしまっている.
例えば
<html>
<head>
</head>
<body>
<div style="width:100%; height:100%; background-color:red;">
</div>
</body>
</html>こんなのを書いたとしたら、期待するのは全部真っ赤になること.
でも実際は、こんな感じの白枠(白い余白)ができてしまう.
原因
原因は非常に単純です.
自分で記述したdivのwidth100%もheight:100%もちゃんと効いています
それでも効いていないのは、bodyにmarginがあるから
対策
なのでbodyのstyleにmarginが0になるように記述する
<html>
<head>
</head>
<body style="margin:0px;">
<div style="width:100%; height:100%; background-color:red;">
</div>
</body>
</html>上のようにmargin:0pxを指定してやると、ちゃんと全部が真っ赤になる
できましたね.
ピンクで囲まれたところをみれば適切にbodyのmargin:8pxが打ち消されているのがわかるかと思います.
