HTMLでhtmlタグやbodyタグの中に隙間ができる対策

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が打ち消されているのがわかるかと思います.

About the author

コメントを残す