line-height:18 pxが使用できない理由

line-heightプロパティは何ですか?

MDNドキュメントに基づいて、line-heightプロパティで行ボックスの高さを指定します.つまり、テキスト行の間隔を設定します.そしてその後このような説明が出てきて、訳本を読むのも容易ではありません.
On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements , it specifies the height that is used to calculate line box height.
block-level要素の場合、行内ボックスの最小高さを指定します.前の説明と一致して、次の文を見てください.non-pacced inline要素は、ワイヤボックスの高さを計算するために使用される高さを指定します.いったいnon-replaced inline elementsとは何でしょうか.

行の要素が置換されていません

私はlnline要素だと知っていますが、少し前のnon-placedがどういう意味か探しました.私たちの友達のstackoverflowの質問から答えが見つかりました.

まず、置換要素(置換要素)の一例は<img>タグである.タグと他のinline属性を持つタグ、例えば<a>, <span>などを考えて、答えを見てみましょう.
So “non-replaced element” is just an element that is rendered as such, instead of causing some external content to appear in its place.
「わかりやすい説明です」「外部コンテンツを含まない」場合はnon-replacedです.MDNで代替要素(replaced element)を検索しましたが、ここでの説明もいいです.
💡 **「置換要素**」(replaced element)は、結果がCSSの範囲外であることを示す要素であり、CSSフォーマットモデルから分離された外部オブジェクトである.
簡単に言えば、代替要素は、現在のドキュメントスタイルの影響を受けないコンテンツの要素と言える.CSSは代替要素の位置に影響する可能性がありますが、内容には影響しません.<iframe>などの代替要素には、親ドキュメントのスタイルを継承しない独自のスタイルシートがある場合があります.
replaced element

<iframe>

<video>

<embed>

<img>

上記の例から、replaced elementについて理解したことがあるかもしれませんが、non*-*replaced elementの上のタグに加えて、一般的なinlineプロパティを持つタグであることがわかります.今、最初の問題に戻ります.

だからline-heightは数字を指定しますか?

MDNによると、line-heightはunitless numbersを使用することを推奨します.常用のpx, rem, emなどに指定されないようにするためですが、理由は何でしょうか?
受け継がれているからこそ.
次の例から見ると、緑枠はunitless number、ピンク枠はem、青枠は%によって指定されたline-heightである.

<div class="box green">
	<h1>오늘은 line-height 속성에 대해서 알아볼 것이다.</h1>
	line-height는 unitless number로 지정하는 것이 좋다. 상속으로 인해 의도하지 않은 결과가 나타날 수 있기 때문이다.
</div>

<div class="box red">
	<h1>오늘은 line-height 속성에 대해서 알아볼 것이다.</h1>
	line-height는 unitless number로 지정하는 것이 좋다. 상속으로 인해 의도하지 않은 결과가 나타날 수 있기 때문이다.
</div>

<div class="box blue">
	<h1>오늘은 line-height 속성에 대해서 알아볼 것이다.</h1>
	line-height는 unitless number로 지정하는 것이 좋다. 상속으로 인해 의도하지 않은 결과가 나타날 수 있기 때문이다.
</div>

.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid pink;
}

.blue {
  line-height: 110%;
  border: solid skyblue;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

親<div>ラベルのfont-sizeが15pxに指定されているため、line-heightは15px * 1.1 = 16.5pxラベルの中でも同じであることがわかります.そのためフォントが破壊されます.以下に説明するフォントの一部は15 pxであるため、想定通りに設定されているが、<h1>タグのfont-sizeは30 pxであるが、親font-sizeの15 pxに基づいてline-heightが算出されたため、問題が発生した.
そのため、これらの問題を避けるために、単位のない数字でline-heightを指定することができます.