兵庫県三田市でホームページ製作をしているゴリラドットです。

ホームページに画像を挿入すると、なんだか画像の下にナゾの隙間ができること、ありますよね。このページではこの画像の下にできる隙間の消し方、それからなぜ隙間ができるのかをわかりやすく紹介しますね。

 

画像の下のナゾ隙間ってこれ

この下のうっすい隙間の消し方です。

 

【解決方法】隙間の消し方

上で見てもらったような画像の下のナゾ隙間。消し方は2つ。おすすめは①番です。

 

①cssで画像にvertical-align:bottomを設定

cssで隙間ができちゃってる画像に対して「vertical-align:bottom」を設定。これでバッチリ隙間が消えます。

ぼくの場合、もう初期化みたいな処理でimgに対して「vertical-align:bottom」を設定しちゃってます。これしとくだけでもう画像の下のナゾ隙間に悩まされることはなくなります。

「vertical-align:bottom」で隙間は消えるけどほかで悪さしないの？なんかほかにバグ出ないの？というのが気になると思いますが、起こらないので安心してください。ここらへんは記事下部でわかりやすく紹介しますね。

 

css

img{
vertical-align: middle;
}

 

②cssで画像にdisplay:blockを設定

2番目の画像下の隙間の消し方がこちら。

 

css

img{
display: block;
}

これでもバッチリ隙間が消えます。

…ただdisplay:blockにしちゃうと画像が横並びにならなくなるんで上みたいにimgに対してぜんぶ設定しちゃうと思わぬところで表示が崩れてしまうことも。なので①に比べておすすめできない方法。

 

画像の下に隙間ができる理由は？

はい、画像の下のナゾ隙間の消し方、解決方法が分かったところで、んじゃなんでそもそも隙間ができてたの？という理由を。やっぱり原因が分かってないとなんかモヤモヤが残りますよね。

 

画像の「inline-block」かつ「vertical-align:baseline」が原因

画像の初期値としてcssで何も指定しない場合、imgは

 

imgのデフォルト値

img{
display: inline-block;
vertical-align: baseline;
}

になっています。

vertical-alignというのは縦方向の揃え位置を決めるプロパティ。サイズの違う文字があったときとかに小さい方の文字を上に揃えるのか真ん中に揃えるのか、みたいなことをします。

 

vertical-alignが「baseline」の時

efgefg

 

vertical-alignが「bottom」の時

efgefg

 

こんな感じ。

「baseline」っていうのは日本語にはないんですが、中学校の時の英語のノートの4線ノートって覚えてますか？あれの上から3本目の色ついてたりちょっと太かったりするあれがbaselineです。あそこで揃えるよ！ってコト。

おーけーおーけー。baselineは分かったけれど、”文字”の縦方向の揃い位置でしょ？なんで画像（img）に関係あるの？とお思いの方、これは見てもらうのが一番。ではいきますね。

 

vertical-alignが「baseline」の時

efg

 

そう。文字と画像がbaselineで揃っちゃってるんです。

ちょうど「e」の下のとこ、そして「g」の丸いとこに画像の下端があっていますよね。

だから文字側のbaselineからbottomまでの間が画像側では不自然に隙間になっちゃう。てことで今度はvertical-alignを設定しなおすと、

 

vertical-alignが「bottom」の時

efg

 

こんな風に文字のbottomと画像のbottomが揃うから隙間がなくなるんですね。

ちなみにベースラインに揃っちゃうから隙間ができるわけで、「vertical-align:top」とかでも画像下の隙間自体は消せます。

 

なので影響はない

上の方で「vertical-align:bottom」をimg要素にがっつり設定しちゃえばOK！ほかに影響でないよ！と自信満々にいったんですが、こんな風に縦方向の揃えを設定するだけですし、baselineとかいう半端な揃いからbottomに変えてるだけなんで影響が出ないってコトなんですね。

少しは安心してもらえたでしょうか。

 

display:blockで治る理由

ついでにdisplay:blockで治る理由も。

vertical-alignはそもそもブロック要素では無視される設定なんですね。なのでdisplay:blockにするとそもそもベースラインで合わせるよ！っていう設定が無効になるので画像下の隙間が消えるのです。

 

まとめ

画像や写真下にナゾの隙間・スペースができてしまう問題について、消し方、解決方法とその理由をわかりやすく紹介しました。

もう難しいこと考えずにimg全体にvertical-align:bottom。これがすべて！こんだけで画像下のナゾ隙間は全部消せます。参考にしてみてくださいね。