こんにちは！最近カメラにお金を投資してしまうコーダーのたけうちです。

去年の6月に念願のミラーレスを買ったわけですが、友達の持っていた三脚に惚れて先日買ってしまいました。。。
付け替えのレンズも欲しくて欲しくてたまらないので、カメラへの投資はまだまだ続きそうです（笑）

・・前置きが長くなってしまいましたが、今回の本題へ移ります٩(◦`꒳´◦)۶

画像と要素の間にできる隙間をなくす

前回からはじめた情報共有・アウトプット記事「takememo」、第2弾は「画像と要素の間にできる隙間をなくすCSS」です。

ホームページを制作したことのある人や制作に携わっている人は一度はこの隙間に悩まされたことがあるのではないかと勝手に思っています_(┐「ε:)_

こんな感じに画像の下の要素にマージンやパディングを指定していなくてもできてしまう謎の隙間・・・「マージンやパディングを0と指定しても消えない、でもなくしたいループ」にはまった時に「vertical-align」を指定すれば隙間をなくすことができます！！！！！

vertical-align

vertical-alignは行の中でのテキストや画像などの縦方向の揃え位置を指定する際に使用するプロパティです。ブロックレベル要素には指定ができないので注意です！
vertical-alignプロパティに指定できる値は複数ありますが、先ほどの画像とdiv要素の間の隙間をなくすには「vertical-align:bottom;」と指定します！

img{
　　　vertical-align:bottom;
}

これで謎の隙間が消すことができます（゜０゜）！

なぜ画像の下に謎の隙間ができてしまうのか？

日本語の場合実線で示されているbaselineで下の位置が揃っていますが、このように「y」や「j」などのようにbaselineより下にずれて配置されるものもあります。

vertical-alignの初期値は「baseline」で画像は下の位置がbaselineで配置されるような使用になっているため、隙間ができてしまう・・ということになります。

まとめ

画像と要素の間の隙間がなくせるのはもちろん、縦方向の位置についても理解を深めることができるのでしっかりと覚えておきましょう！

それではまた─=≡Σ((( つ•̀ω•́)つ