はじめに
paddingとmarginを指定していない、またはpaddingとmarginが0になっているのにも関わらず、要素と要素の間に余白ができてしまう時の原因と対処法について解説します。
状況
下記例のように赤色の画像と青色の画像を縦に並べた時に2つの要素の間に余白ができています。赤色の要素には下記cssを指定しているのにも関わらず余白ができています。
padding:0;
margin:0 auto;
原因
インライン要素の余白
<img>要素はデフォルトでインライン要素として振る舞います。インライン要素には余白が設定されていることがあります。これにより、要素間に微小な隙間が生じる可能性があります。
対処法
要素に適切なcssを指定しましょう。
ブロック要素にする
要素にdisplay:block;を指定すると余白がなくなります。指定後に中央揃えしていたものが左寄せになったりしたら、margin:0 auto;で中央揃えにしましょう。
display: block;vertical-alignを指定する。
vertical-alignにtopかmiddleかbottomを指定すると余白がなくなります。
まとめ
今回の記事では、paddingとmarginを指定していない、またはpaddingとmarginが0になっているのにも関わらず、要素と要素の間に余白ができてしまう時の原因と対処法について解説しました。
もしサイトを作成しているときに今回の記事で紹介したような意図しない余白ができてしまった場合は、上記の対処法を試してみてください。
