バックグラウンド：currentColorはどのように行を追加しますか？ （Mozillaのサイトから）次の例では

Question

：スタイルから、それが消えを描くライン：

<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>

Please take a look at this corresponding jsfiddle link.

私は "currentColor背景" を削除した場合。このようなスタイルはどのようにして行を追加しますか？

ありがとうございました。

Answer 1

divは、ラインとしてを提示されることを意味し、一つの画素（1ピクセル）の高さを有しているので - その中Xピクセル高さのないコンテンツが存在しない、すなわちので、それ自体のサイズ（heightが指定されなかった場合、0に崩壊する）。したがって、divには背景色（それがレンダリングされる色と一致しない（色が一致した場合、不可視の錯覚を与える））があるため、その色のピクセル高さの行が1つ表示されます。

箱を押しつぶしたり、紙を折りたたむことを考えてください。完全に消えてしまうことはありません（存在しないか、現在の形で、少なくとも簡単には）できなくて、座っていた飛行機

もちろん、解決策ではないだけではあまり役に立ちませんが、他の人たちがあなたの援助に来ています：span要素を使用してくださいテキスト内のテキストをグループ化するには、デフォルトでinlineになります。一方でテキストがある場合は、権利のみを出力する必要があります。これは明示的にheightという値を指定していることを忘れてしまいます。シナリオ全体について

Answer 2

Divはブロック要素であるためです。

<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div> ​