【HTML課題06】表組みとボックスモデルの文字位置
設問
table要素では高さを指定しないとコンテンツ内容、つまり文字がtdセルの中にぴったりはまった状態になります。
しかし冷静にみれば若干下のスペースが空きすぎているようにみえます。これは、すべての要素でも、padding指定をし背景色を設定すると同じように下があいて見えます。
何故かを調べてブログに書きなさい。
上下の空きが均等にする指定の仕方があるならば、それも書きなさい。
なぜ、下に余白が空くのか
ブロック要素内のインライン要素は、「行」の中に表示されます。
インライン要素はデフォルトの場合、行の下端ではなく、ベースラインに揃えられる設計になっています。
この設計は英語を基にして行われているため、日本語ではベースラインと下端との距離(ディセンダ)の分だけ、下の余白が広くなります。
上記の理由から、表組み下の余白や、背景色を付けた時の下方があいて見えます。
余白を均等にする方法
- vertical-align: middle;で、テキストを中心に持ってくる
- 上下のpaddingの値を変える
などが考えられます。
でも、自信を持ってこれが正解、とは至っていません。