HTMLのスペースの問題を解決する

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上記3つの書き方でアイコンとテキストの距離が違うのはなぜですか？インラインブロックアイコンと改行は関係あるのでしょうか？ 5 行変更すると

<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span> 联系我们</h2>

上記 2 つの効果は同じですが、なぜですか?

<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

nasp は実際の型付きスペースと同じ効果があるのに、なぜ nbsp を使用するのでしょうか?

<h2><span class="glyphicon glyphicon-send"></span>  联系我们</h2>
<h2><span class="glyphicon glyphicon-send"></span>       联系我们</h2>

なぜ 1 スペース、1 nbsp と 5 スペース、1 nbsp では同じ効果があるのでしょうか?

ブラウザが HTML ドキュメントを解析すると、複数の接続されたスペース、キャリッジ リターン、または TAB が直接 1 つに解析されます...

インライン要素間のスペースまたはリターン (span、b、a など)、車が解析されますスペースとして扱うため、コードの最初の部分は次と同等になります:

 联系我们
  联系我们
<h2><span class="glyphicon glyphicon-send"></span>   联系我们</h2>

通常、HTML はドキュメント内のスペースをトリミングします。文書内に 10 個の連続したスペースを入力すると、HTML はそのうちの 9 個を削除します。を使用すると、文書にスペースを追加できます。

nbspとは英語のNon-Breaking SPaceの略で、直訳すると「非破壊空間」となります。 HTML では、 は 1 つのスペース文字 (英語では 1 つのスペース文字) を表し、1 つの中国語文字は 2 つの英語文字、つまり 2 つを占めます。

DOM 内の空白文字は、ノード構造を処理するときに多くの問題を引き起こします。
Mozilla のソフトウェアでは、元のファイル内のすべての空白文字が DOM に表示されます (タグに含まれる空白文字は除く)。この処理方法は、エディター内でテキストを直線的に配置できる一方で、CSS の空白:pre も役割を果たすことができます。
これは次のことを意味します:
- 一部の空白文字はそれ自体でテキスト ノードになります。
- 一部の空白文字は、他のテキスト ノードと結合されて 1 つのテキスト ノードになります。

Internet Explorer はノード間に生成された空白テキスト ノード (改行など) を無視しますが、他のブラウザは無視します。

以上がHTMLのスペースの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。