imgタグで画像を配置した時に発生する隙間・ズレの対処法

Web制作

 

imgタグを使用して画像を配置した時、画像の下にびみょーな隙間が出ることがあります。

以下例だと、画像とmargin(オレンジ部分)の間にちょっとだけ隙間ができているのがわかります。

※検証で見るとわかりやすい

 

一見大したことないように見えますが、この隙間のせいで配置が微妙にズレたりすることがあります。

したがって、今回はこの隙間を解消する方法をお伝えします。

 

以下、記事に入ります。

 

imgタグの隙間の解消法

結論から言うと、imgタグにvertical-align: bottomを指定します(middleでも可)

これだけでOK。

 

これを先ほどのimgに指定してみると、

この通り隙間が消えています

 

上記の記述を自分のCSSにあらかじめ指定しておくと、画像が出てくるたびに消す必要がないので便利です。

(reset.cssやcommon.css、style.cssの一番上などに記載しておく)

 

隙間が出る原因

imgにはデフォルトで、vertical-align: baselineが指定されています。

 

このvertical-align: baselineがかかった状態のインライン要素であるimgを、divやfigureなどのブロック要素で囲ってしまうと隙間が発生してしまいます

 

そのため、vertical-alignの指定をbottomやmiddleにすることで隙間が解消できるというわけです。

 

ちなみに、インライン要素のimgに、display: blockを指定しても隙間を解消することができます

隙間ができる原因がインライン要素なのであれば、ブロック要素に変えてしまおうという考え方ですね。

 

まとめ

imgタグの隙間問題について、ご理解いただけたでしょうか。

小さな問題ですが、この隙間が邪魔でうまく画像が中央に寄らないなどの問題が発生します。

 

悩まされないように、対策を覚えておきましょう。