この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
今回は、CSSのコーディングで画像の下などにできる、いらない余白を消す方法について解説します。
どんな状況？
まず、余白がでたときは以下のような状況でした。
- 画像を配置したときに、 意図しない余白が出る。
- imgタグにmargin:0;padding:0;を 設定しても余白が消えない。
解決法（結論）
imgタグにvertical-align: bottom;を設定する。
結論をいうと、imgタグにvertical-align: bottom;を設定することで、画像の余白を消すことができます。
img {
vertical-align: bottom;
}なぜ余白が出た？
vertical-alignの初期値がbaselineになっているからです。
img:{
vertical-align:baseline:
}bottom以外のプロパティは？
bottom以外にもvertical-alignのプロパティはありますので、bottom以外のプロパティでも余白が消えるのか疑問になるかと思います。
baseline以外のプロパティであれば大丈夫
baseline以外のプロパティを設定すると、余白を消すことができます。
baseline以外のプロパティをまとめてみました。
- vertical-align:top; テキストの上端に合わせる
- vertical-align:middle; テキストの中央に合わせる
- vertical-align:bottom;テキストの底辺に合わせる
- vertical-align:baseline; （初期設定）テキストのベースラインに合わせる
実際にコードを書いてみて、baseline以外のプロパティを試してどのような挙動になるか試してみましょう。
補足
vertical-align: bottom;を個別のclassに設定するのではなく、imgタグに設定するのがおすすめです。
例えば、.logoというclassを設定していて、vertical-align: bottom;をそのclassのみに設定するのはおすすめしません。
.logo以外の画像は、vertical-align:baseline; のままだからです。
imgタグにvertical-align: bottom;を設定する
imgタグにvertical-align: bottom;を設定すると、imgタグ（画像）全体に適用することができます。
まず、vertical-align: bottom;をimgタグ全体に適用して、個別でカスタマイズしたければ、vertical-align:middle; （テキストの中央に合わせる）などをclassに適用する方をおすすめします。
書籍
CSSの書き方で迷うことがあれば、書籍で勉強するのもおすすめです。
HTMLとCSSが勉強できる書籍を紹介します。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
こちらの本は、初心者の方にまずおすすめしたい本です。
とにかく親切でわかりやすく書かれています。
図・イラストが多用されていて、重要なところが大きな字やアンダーラインで強調されています。
私は小さい字が長文でびっしり書かれていると文字に圧倒されてしまいます。
その点、勉強に入りやすく、飽きずに続けることができます。
本のタイトル通り、1冊目としておすすめです。
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】
こちらの本は、HTML・CSSの文法や、レイアウトの仕方などが詳しく解説されています。
私が読んだのは前の版の書籍でしたが、とても詳しく書かれていて何度も読み返し、辞書のように使っていました。
こちらはある程度HTMLの概要をつかんでから読むのがおすすめです。
まとめ
- imgタグにvertical-align: bottom;を設定することで、画像の余白を消すことができます。
今回は、CSSのコーディングで画像の下などにできる、いらない余白を消す方法について解説しました。
それではまたノシ
