line-heightの単位指定の問題点

line-heightを適切に指定することでブラウザ上での可読性に大きく貢献することは言うまでもなく。

おおざっぱですが、おおよそ1.2〜1.8程度に指定されていることが多いと思います。

ただ、このline-heightを単位指定するかしないかで問題発生の有無がわかれる事象があります。

以下例です。

p要素のline-heoghtをそれぞれ 1.4em、1.4 とし、
文中にp要素(親要素)の子要素としてem(font-size;200%)を用いています。
p要素のフォントサイズは16px


どういうことかというと...
単位ありの場合は子要素(今回は<em></em>)でも親要素にて計算された値が使われ、単位なしの場合は指定した値が継承されるということです。

別にem指定が間違っている、いけないというわけではなく、サンプルのような不具合が起きやすいという話。

HTML/CSS | | トラックバック(0) |
Share |

トラックバック(0)

トラックバックURL: http://www.spiral-records.com/mt/mt-tb.cgi/1168

Facebookコメントプラグイン

Powered by Movable Type 4.261

Tumblr : log long long time ago