このブロックはling-heightが150%で、font-sizeは12ptです。行の高さは18ptということになります。

この引用部分は、font-sizeが10ptです。行の高さは、10pt×150%で15ptになるわけではありません! 親要素の18ptという行の高さがそのまま継承されます。

このブロックはling-heightが1.5で、font-sizeは12ptです。行の高さは18ptということになります。

この引用部分は、font-sizeが10ptです。親要素のline-heightの1.5という値が継承され、行の高さは10pt×1.5で15ptとなります。上記の引用部分より行の高さが小さくなります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>line-heightの継承のテスト</title>
<style type="text/css">
<!--
div { width: 30em; }
#div1 { font-size: 12pt; line-height: 150%; }
#div2 { font-size: 12pt; line-height: 1.5; }
blockquote { font-size: 10pt; }
blockquote span { background-color: yellow; }
-->
</style>
</head>
<body>

<div id="div1">
<p>このブロックはling-heightが150%で、font-sizeは12ptです。行の高さは18ptということになります。</p>
<blockquote><p><span>この引用部分は、font-sizeが10ptです。行の高さは、10pt×150%で15ptになるわけではありません! 親要素の18ptという行の高さがそのまま継承されます。</span></p></blockquote>
</div>
<div id="div2">
<p>このブロックはling-heightが1.5で、font-sizeは12ptです。行の高さは18ptということになります。</p>
<blockquote><p><span>この引用部分は、font-sizeが10ptです。親要素のline-heightの1.5という値が継承され、行の高さは10pt×1.5で15ptとなります。上記の引用部分より行の高さが小さくなります。</span></p></blockquote>
</div>

</body>
</html>