【解決方法】 タグ内のコンテンツの後に タグを追加すると、段落の後に余分な改行やスペースが表示されないのはなぜですか


ap タグ内の改行 br タグに関する不可解な問題に遭遇しました。 具体的には、p タグ内のコンテンツの後に br タグを配置すると、予期した余分なスペースが作成されないことに気付きました。

HTMLコード:

HTML
<p>
This is the first <br>
</p>
<p>
This is second
</p>

p タグはスペースを作成するため、スペースが作成されますが、br も追加したため、もう 1 つの改行スペースが作成される必要があります。

なぜこれが起こらないのか

私が試したこと:

インターネットで調べてみましたが、明確な理由は見つかりませんでした。

aptのコンテンツの間にbrタグを入れようとしましたが、段落のコンテンツが壊れる可能性がありますが、このbrタグは、終了pタグの直前のコンテンツの後に置くと機能しません

解決策 1

私はちょうどこれを試してみました W3Schools Tryit 編集者[^]、同じ結果が得られます。 Break タグはテキストの行を区切るために使用されるため、
タグがブラウザに次の行に移動するように指示しているとしか考えられません (CR/LF シーケンスと同じ)。 ただし、次に読み取るのは

であるため、何もせず、同じ時点でそのタグを処理します。

解決策 2

BR タグは新しい空白行を追加しません。 テキスト行が 2 行にほとんど分割されます。 BR の後にテキストがないため、何も起こりません。

このように考えてください。 P タグの間にあるテキストは、HTML では 1 行のテキストになります。 サンプルコードでは、実際には次のようになります。

<p>This is the first</p><p>This is second</p>

段落タグはテキストを分割し、段落間に空白スペースを挿入するため、BR タグには何も表示されません。 BR タグを使用しないと、段落の間に空白行が 1 行挿入されます。

おそらく段落の間に BR を入れようとしているのではないでしょうか?

<p>This is the first</p><br><p>This is second</p>

これは段落間に余分なスペースを追加することです。

解決策 3

ダブルスペースが必要な場合は、次のことを試してください。

HTML
<p>
This is the first <br>&nbsp;
</p>
<p>
This is second
</p>
<p>
This is third
</p>

先頭と末尾の空白はブラウザによって削除されるため、「空白以外の空白」を追加すると、次の行が強制的に表示されます。

ブラウザ表示
This is the first 
  

This is second 

This is third

コメント

タイトルとURLをコピーしました