画像と要素の間にできる隙間をなくす|takememo Vo.2

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

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

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

画像と要素の間にできる隙間をなくす|takememo Vo.2

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

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

0304

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

vertical-align

vertical-alignは行の中でのテキストや画像などの縦方向の揃え位置を指定する際に使用するプロパティです。ブロックレベル要素には指定ができないので注意です!

vertical-alignプロパティに指定できる値は複数ありますが、先ほどの画像とdiv要素の間の隙間をなくすには「vertical-align:bottom;」と指定します!

img{
   vertical-align:bottom;
}

0304_2

これで謎の隙間が消すことができます(゜0゜)!

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

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

0304_3

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

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

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

竹内

竹内

デザインを考えたり物を作るお仕事がしたいと思い、パソコンスクールでWebの勉強をしたのち、AIコミュニケーションに入社しました。主にHP制作を担当しています。わからないことのほうが多いですが、日々物づくりに携われるこの環境の中で働くことができてとても嬉しいです。新しい技術が増え続けるWeb業界の中で多くのことを吸収し、会社や仲間とともに自分自身成長していきたいと思っています。