英語圏でないため気付きにくいルール

ベースラインとは文書内に配置されたプレーンテキスト(以下テキスト)の下に仮想的に存在する線です。テキストを打ちこむと、当然のように文字はその線上にキレイに並びます。

日本語と英語を打ちこんだテキスト


しかし、英語の場合は小文字のgやy、j等、このベースラインから下にはみ出すものがあります。通常、文字を打ちこんだ場合このベースラインはデフォルトスタイルシートでvertical-align:baselineに設定されています。つまり何も考えなくても常にテキストの下にはgやyの為に常に隙間があいているという事になります。


しかし、このプロパティーは別にその行のベースラインそのものを動かすわけではなく、あくまでテキストの行の中での高さをコントロールするものなので、同じ大きさの文字を打つ分にはそのベースラインが狂う事はありません。普通にテキストを打つだけなら問題にはならないのですね。


ソ-ス:知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ - WEBCRE8.jp


imgタグで指定した画像の下にわずかな隙間(空白)が空いてしまう - CSSデザインノート