【HTML課題06】表組みとボックスモデルの文字位置

設問

table要素では高さを指定しないとコンテンツ内容、つまり文字がtdセルの中にぴったりはまった状態になります。
しかし冷静にみれば若干下のスペースが空きすぎているようにみえます。

これは、すべての要素でも、padding指定をし背景色を設定すると同じように下があいて見えます。

何故かを調べてブログに書きなさい。
上下の空きが均等にする指定の仕方があるならば、それも書きなさい。

なぜ、下に余白が空くのか

ブロック要素内のインライン要素は、「行」の中に表示されます。
インライン要素はデフォルトの場合、行の下端ではなく、ベースラインに揃えられる設計になっています。
この設計は英語を基にして行われているため、日本語ではベースラインと下端との距離(ディセンダ)の分だけ、下の余白が広くなります。

上記の理由から、表組み下の余白や、背景色を付けた時の下方があいて見えます。


余白を均等にする方法

  • vertical-align: middle;で、テキストを中心に持ってくる
  • 上下のpaddingの値を変える

などが考えられます。
でも、自信を持ってこれが正解、とは至っていません。