6 つの空白と 5 つの空白が同じ結果になるのはなぜですか?
<html>
hello<br/>hello<br/>
hello<br/>hello<br/>
</html>
firefoxで開くには。
2.まだ問題があります
hello<br/>hello<br/>
ここには 5 つの空白がありますが、なぜ Web ページには 3 つの空白しか表示されないのですか?
それは明らかに同じ効果ではないことを示しています。
1 つの は、コンテンツの前に 1 つの余分なスペースです。したがって、同じ結果を示すことはできません。その点については、純粋な css を使用できます。
<html>
<body>
<div style='padding-left:0px;'>Hello</div>
<div style='padding-left:50px;'>Hello</div>
<div style='padding-left:25px;'>Hello</div>
<div style='padding-left:0px;'>Hello</div>
</body>
</html>
出力：
乾杯！
効果は明らかに同じではありません。しかし、@ it_is_a_literature の意味は、1 行目の「h」が 2 行目の 2 番目の「l」から始まる理由だと思います。それに対する私の答えは、すべての文字の幅や寸法が等しいわけではないということです。たとえば。hello の「l」は、同じ単語の「e」よりもスペースが少なくてすみます。
" " はスペースバーのように機能します。したがって、スペースは 3 つではなく 5 つです。
メインのフォント ファミリーには、各文字のサイズが決まっていません(例: 'l' は 'L' よりも細い)。つまり、「hello」の 5 文字よりもスペース 5 つの方が場所を取ります。
規則的な文字間隔が必要な場合 (ASCII アートを作成する場合)、CourrierやLucida Consoleなどのモノスペースフォント ファミリを次のようなCSS クラスと共に使用する必要があります。
.monospace {
font-family: "Courier New", Courier, monospace;
}
違いを確認するためのPlunker サンプルを次に示します。