画像の下に余白が出来る問題
今回のテーマは以下に表示されているもの。
See the Pen
【Step.0】画像の下に余白が出来る問題を通してインラインレイアウトについて学習 by Ken (@kaneyan)
on CodePen.
これは<p>タグの中にインライン要素である<img>を入れただけのシンプルなHTMLであるが、表示されているものを見ると<img>の下に余白があるのが分かる。この余白を消すための方法として「<img>に<vertical-align: bottom>を入れる」ということでたくさんの方が書かれているが、今回この点について深堀りしたので、備忘録として残しておく。
インライン要素の高さについて
上の状態ではなかなか答えが分かり辛いので、以下の通りに手を加える
- テキストを追加する
- 追加したテキストのフォントサイズを上げる
- テキストに背景をつける
そうして出来たのがこちら。テキストは「ｘ」を入れた点以外は適当。
See the Pen
【Step.1】画像の下に余白が出来る問題を通してインラインレイアウトについて学習 by Ken (@kaneyan)
on CodePen.
手がかり2つ
この画像で注目する点は、2つ。
1.テキストの上下の余白
背景をつけたことによってテキストの上下に余白があることが分かった。これは何かというと、<line-height>である。このHTMLはGoogle Chromeで表示させているが、調べたところではChromeブラウザは実はデフォルトで<line-height>を1.5と解釈している様なのだ。ここではフォントサイズを60pxに設定しているので、半分の30pxの余白が上下に半分ずつ振り分けられているということ、、、だと思う。
2.画像の下が揃っている位置
もう1つの注目すべき点は、画像の下が揃っているのはどこか？という点。インライン要素の縦位置調整には<vertical-align>というプロパティが使われるが、これがどこに設定されているか？ということである。これは画像を見れば分かる様にxの下に揃っているが、この位置の名称としては<baseline>という。つまり、インライン要素の縦位置の初期設定としてはこの<vertical-align:baseline>が設定されているのである。
解決方法について
ここまで分かればもう簡単だ。上の2つの手がかりから、画像下のスキマの正体は<line-height>で作られたテキスト下の余白分であるということが分かる。解決方法としては、画像の縦位置を<line-height>の下側に合わせることであり、これを実現するためのプロパティである、<vertical-align:bottom>を設定すると以下の様になる。
See the Pen
【Step.2】画像の下に余白が出来る問題を通してインラインレイアウトについて学習 by Ken (@kaneyan)
on CodePen.
まとめ
「画像の下に発生する余白を消す」ことに対する答えとしては「<img>に<vertical-align:bottom>の記述を加える」であり、この1行で一瞬で解決するんだけど、理屈が知りたくて1つずつ分解しながら考えてみた。今回の学習を通して、インライン要素の縦位置に関する理解が少し深まったのではないかと思う。
ちなみに今回参考にさせていただいたのが、こちらのサイト。ありがとうございました！
https://html5experts.jp/takazudo/13339/
https://html5experts.jp/takazudo/13464/
