Web制作をしていると、上下左右をピッタリと合わせたいのに謎のスキマができてしまうことがあります。
これまでに経験した原因と、実践的な対策について解説します。
HTML/CSSに謎の隙間ができる原因と対策
paddingとmarginの指定による隙間
おそらくすでに確認はされているかと思いますが、paddingとmarginの意図せぬ指定による隙間はまっさきにチェックが必要です。
謎の隙間ができる要素と、その要素と設置している周囲の要素すべて（親要素や子要素含む）へと試しにpadding:0;とmargin:0;をつけてみて、問題が解決するか否かをチェックしてください。
それで隙間がなくなったならば、どの要素のpadding,margin指定に問題があるのか一つひとつ見ていけば解決するはずです。
object-fitの指定による隙間
これは<img>にのみ起きるものです。
画像をdivなどの親要素で囲っている際に、画像とその親要素との間に謎の隙間ができてしまう。画像はwidthもheightも100%なのに……。
という場合はobject-fit:coverを指定して解決するか試します。
display:inlineとinline-blockの特性による隙間
これは<a>や<img>に謎の隙間ができたときによくある原因で、明示的にdisplay:blockを指定すれば解決するケースがほとんどです。
とくにアイキャッチ画像を表示する場合などは<a>も<img>も関わってきますから、WordPress制作をしていると一度はここでハマるのではないでしょうか。
<a><span><img>などはデフォルトでinlineが指定されています。inlineやinline-blockの要素は文字の一部として扱われますので、親要素のline-heightやfont-sizeが効いてしまっていたり、ベースラインに沿って配置されたりすることで、意図せぬ隙間があらわれます。
display:block;を指定することで要素を隙間なく埋めてくれますから、解決するというわけです。
画像素材の作成ミスによる隙間
素材を制作した人が意図せぬ場所に透過部分を含めて画像を書き出してしまったりすると、画像自体に隙間ができることになり、やはり謎の隙間として鎮座することになります。
<img>で謎の隙間ができてしまった場合は、初期段階で念の為画像素材側も疑うと良いかもしれません。
筆者は1時間くらいCSSやHTMLとにらめっこした末に気づいたことがあります。
overflow:hiddenの指定漏れによる隙間
サイズを明示的に指定した要素を取り扱っている場合、レイアウトが画面幅を超えてしまうことがあります。その際は親要素にうまくoverflow:hiddenを指定できていないと、画面が意図せず横に伸びてしまい、結果的に「謎の隙間」のようなものが生まれてしまう可能性があります。
ずっと同じ画面幅でだけレイアウトをチェックしていると気づきにくいため、いくつかのモニターで見たり、デベロッパーツールで複数の画面幅でチェックしたりする癖をつけておくと、スムーズに発見できるようになります。
シチュエーション別のよくある謎の隙間について
アイキャッチ画像に謎の隙間ができる
アイキャッチ画像に謎の隙間が発生している場合は、だいたいdisplay:blockで解決します。
特定のブラウザでだけ発生することもありますので、Chrome、Safari、Firefoxなど複数のブラウザでチェックしてみることをおすすめします。
画面が横に動いて謎の隙間ができる
明示的に大きなサイズを指定している要素や、fixedを指定している要素の周辺によく発生します。
この場合、ほとんどの要素は画面幅に沿って縦に整列している中で、右や左へ飛び出している要素が見つかると思います。その要素の横幅について対処すると良いでしょう。
謎の隙間は経験不足とケアレスミスによって起きる
Web制作に慣れれば慣れるほど「ああこれはdisplay:blockだな」「これはmarginだろう」と、すぐに原因に気づけるようになります。
色々と経験していって、スムーズに綺麗なレイアウトを指定できるようになりたいものですね。
