CSSで作った枠内にピッタリ画像を配置したくても、微妙に下に隙間が出来てしまう件

画像の下に隙間が出来る…。

普段はあまり気にならないのですが、CSSで作ったコンテナなどに画像を配置すると、非常に気になります！ｗ

例えば、CSS枠にピッタリと収まって、画像の淵をborderとかで装飾したいと思っても隙間が生じる…。

ちなみに、隙間が出来るイメージはこんな感じです。ｗｗ


と言うことで、今回はこの面倒な症状を解決する方法です。

結論から言うと、解決方法としては3つあります！

1つ目は、line-heightを0に設定する方法です。

.hogehoge {
     line-height:0;
}

ただ、この設定だと中身にテキストとかを配置すると高さが0なので、文字が潰れて読むことが出来なくなります！ｗ

絶対にテキスト使わなければ良いのですが、現実的では無い？というかスマートじゃないかもですね…。

次に、vertical-alignをbottomに設定する方法です！

.hogehoge {

}
.hogehoge img {
     vertical-align: bottom;
}

要は、隙間が出ていた下側に画像を配置し上には隙間が出来ない特性を利用した憎らしい演出をしているというわけです！ｗ

一般的にはデフォルトでbaseline;となっているので隙間が出来てしまうんですね。

ちなみに、baseline;とbottom;は異なる定義なので混同しないように！

何が違うのかって…？

そもそも、baseline;は文字の下に合わせることでとbottom;はその行の下を意味します。

文字のbaseline;がその行の一番したか？というとそうではないのです！

ちなみに、text-bottom;ってのもありますが、これは文字の一番下を意味するので、行やボックスの一番下か？というと、これも違うのでここではbottom;を定義します。

この辺り間違いやすいので注意してくださいね！

最後に、display:block;の定義です。

.hogehoge {

}
.hogehoge img {
     display:block;
}

こんな感じですね。

これだとブロックコンテナ的な定義になるので、こちらもピタッとフィットします！ｗ

まあ、一長一短？があるのかは不明ですが、使いたくても使えない場合もあるかも知れません。

何がベストというのはありませんので、ご自身のサイトに合わせた定義で隙間問題は解決してください。

スラスラわかるHTML&CSSのきほん 著：狩野 祐東