テキストの上に生まれる余白

January 31, 2008

例えば（唐突）、とある段落の行送りを18pxに、そのフォントサイズを12pxに設定したデザインがあったとします。これをCSSで設定する場合、おおよそ次のように書くことになると思います。

p {
font-size: 12px;
line-height: 1.5;
}

CSSの仕様上、テキストは行ボックスの垂直方向に対して中央に位置することになります。つまり上の場合、行ボックスの高さが18pxとなり、ここからフォントサイズの12pxを引いた6pxを、文字の上下で分け合うようなかたちになります。

そして何かのCSSを書くたびに、これを厄介に思っているのです。だって、デザイン的には開始行の文字の上辺と、その横の写真などの上辺を水平に揃えたいことが多いから。

上の例だと、段落の上方向に余分な3pxの空白ができてしまい、段落の開始行の位置が少し下がってしまいます。

この誤差をなくして、なるだけ正確にデザインカンプの表示を再現しようと思うと、面倒な計算が必要となり、スタイルの指定が難しくなっていくのです。

なにかスマートな解決策がないか、ずっと模索中。

このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/798

p {
font-size: 12px;
line-height: 1.5;
margin-top : -0.25em;
}

うーん。。。

投稿者もしかしたら : February 25, 2008 04:36 PM

ありがとうございます。
上方向に負のマージンで調整ですね。

ただ、p要素内がテキストでなく、img要素だった場合なども考慮すると、ちょっと面倒になっていきそうではあります。

WIREDVISIONの記事部分では、逆に写真の上方向にマージンをつけているようです（つまりあらかじめテキストの上の余白は小さめに指定してある）。
http://wiredvision.jp/news/200802/2008022519.html

投稿者 kawachi : February 25, 2008 07:09 PM