[css]画像・背景にできる隙間・余白を無くしたい

css

こんにちは、タカフミです!

今回は

『CSSで画像や背景と壁の間にできる隙間を無くそう』

というテーマで書いていきます。

書いてみよう

こんな感じに書いたとして、

左に10pxくらいの隙間ができちゃいました。

赤い線で塗っているところが意図せずにできてしまった余白です。

HTML

CSS

最初は気にしていなかったのですが模写をするにあたって実物と見比べると明らかに違和感があったので調べてみました。

その結果、bodyは上下左右にそれぞれmarginを持っていることがわかりました。

ということでbodyのmarginとpaddingを0にしてあげれば余白は消えそうですね!

CSS

上記のように追加したらちゃんと消えました!

まとめ

bodyは最初余白を持っている。

そのためmarginを0にすれば余白は消える。