まず、コードを見てみましょう。
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7; }<div><span>123<br>456<br>789<br>000</span></div>なぜspan'はline-height使用されないのですか？
はline-heightまだですが、のプロパティを200pxに設定すると、のが使用されますか？spandisplayinline-blockline-heightspan
下記参照：
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }<div><span>123<br>456<br>789<br>000</span>ブロックレイアウトは、div要素がデフォルトであるように、ラインボックスの垂直スタックで構成されており、それらの間にスペースがなく、オーバーラップすることはありません。各ラインボックスは、ブロックに指定されたラインの高さの架空のインラインボックスである支柱で始まります。次に、ラインボックスは、ラインの高さに応じて、マークアップのインラインボックスに続きます。
次の図は、最初の例のレイアウトを示しています。フォントの高さの1.7倍は支柱の高さよりもはるかに小さいため、線の高さは支柱の高さによって決まります。これは、線のボックスにインラインボックスが完全に含まれている必要があるためです。の線の高さをspan200pxより大きく設定した場合、線のボックスの高さが高くなり、テキストがさらに離れて移動するのがわかります。
インラインブロックを作成しても、とspanの関係は変わりませんが、スパンは、独自のラインボックスのスタックを備えた独自のブロックレイアウト構造になります。したがって、テキストと改行はこの内部スタック内に配置されます。内側のブロックの支柱はフォントの高さの1.7倍、つまりテキストと同じであり、レイアウトは次のようになります。したがって、テキストの行は、の行の高さの設定を反映して、互いに近くに配置されます。divspanspan
（2つの図は異なる縮尺であることに注意してください。）
これは仕様によるものです。HTMLドキュメントには、ブロックとインラインの2つの要素タイプがあります。インライン要素はドキュメントのフローを中断しませんが、ブロック要素は中断します。
ブロック要素は、その名前が示すように、一部のコンテンツを含むページ上の領域をブロックします。ブロック要素の例は次のとおりです。<p>および<div>。これらの要素にheight、line-height、およびその他のCSSプロパティを適用して、ブロックのサイズを変更し、その後、ドキュメントのフローを変更することができます。
インライン要素は、レンダリングに必要な最小限のスペースを占有します。つまり、これらの要素に幅と高さを設定しても効果はありません。すでに見てきたように、インライン要素をブロック要素として扱い、高さを適用できるようにするようにブラウザに指示できます。
この例は、<li>要素を使用してメニューを作成するときに見られます。 <li>sはブロック要素です。リストを作成すると、アイテムはページに垂直に表示され、各リストアイテムが前のリストアイテムの下に表示されるようになります。ただし、display: inline;リストアイテムに適用すると、水平方向に表示されるようになります。