web-dev-qa-db-ja.com

段落内の<br>要素はいつ無視されますか？

私は時々それを知っています、<br>要素が、使用しているブラウザ（FirefoxおよびChrome）でレンダリングされません。

<p>Hello<br></p>
<p>Hello<br></p>

と同じようにレンダリングされます：

<p>Hello</p>
<p>Hello</p>

同じやり方で、

<p>Hello <a href="https://ddg.gg">ddg<br></a></p>
<p>Hello</p>

と：

<p>Hello <a href="https://ddg.gg">ddg</a></p>
<p>Hello</p>

また、ブラウザで開いたときに改行なしでレンダリングされます。

この動作を指定するセクションをHTML仕様で見つけることができませんでした。これの仕様がどこにあるか知っていますか、またはこの動作を簡単に表現できますか？

あなたがそれらを知っているなら、私もこの振る舞いをする理由に興味があります。

[〜＃〜] edit [〜＃〜]：br要素をHTMLのこの位置に配置するのはかなり「正しくない」ことを知っています。このHTMLを生成したのは私ではありませんが、このHTMLを別の形式に変換する必要があるので、ブラウザーがこのケースをどのように処理するかを理解したいと思います。

htmlline-breaksspecifications
11
edi9999

使用する理由brタグ-HTML br要素は、テキストの改行（carriage-return）を生成します。 carriage-return or returnは、デバイスの位置をテキスト行の先頭にリセットするために使用される制御文字またはメカニズムです。

注意点：

br tagの寸法を確認すると、幅= 0、高さ（〜18px）があります。しかし、それをpタグ内で使用すると、brタグはp要素の高さになりますが、重要なことそれ自身の幅は0です。

質問への回答

これを= <p>Hello<br></p>として使用すると、開発者コンソールのbr要素が表示されますが、余分なスペースはありません後にテキストがないため br tagそしてそれ自身の幅は0なので、全体の幅はゼロになります。したがって、余分なスペースや改行は必要ありません。 例-

p {
  margin: 0;
}
<p>Hello<br></p>
<p>Hello<br></p>

しかし、次のようなコードがある場合、_<p>Hello<br>World</p>の場合、br tagはカーソルを次の行の先頭に移動し、br tagの後にテキストを幅があります。そのため、余分なスペースや改行を確認できます。例-

p {
  margin: 0;
}
<p>Hello<br>World</p>
<p>Hello<br>World</p>

そして、これはbr tagを使用する適切な場所ではないことに同意します。これは、p要素が自動的に改行を追加するためです。したがって、brタグを終了の直前に使用するpタグは意味がありません。

以下のリンクを確認してください：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element

1
PrinceIsNinja

見つかりました この答え これは、私が思いつくよりもはるかにエレガントな説明を提供します。まとめて状況に合わせてみます。コードをもう一度見てみましょう。

<p>hello<br/></p>
<p>howdy</p>

<hr/>

<p>hello</p>
<p>howdy</p>

水平線の上下のコードはまったく同じようにレンダリングされます。

WHY？

まあ、ユーザーReiが説明しているように、これは、「BR要素がまったく無視されないためです。これは、その行で改行する必要があることを示しています。つまり、これは、現在のテキスト行。新しい行を作成することではありません。 "スタイルを適用できるため、無視されないことがわかっています。以前に発見したように、マージンをデフォルトより大きくすると、ブレークがまだ残っていることがわかります。

詳細については、他の回答をご覧ください。疑わしいと質問したユーザーは同様のプログラムを作成しており、回答には多くの例とドキュメントがリンクされています。 pとdivはどちらも ブロックレベルの要素 なので、投稿を読むときはそのことを覚えておいてください。

TLDR：BRは自動的に改行を作成せず、現在のテキスト行の終わりを示すだけです。

1
kalkronline

すべてのブラウザーはW3Cコンソーシアムによって修正された特定の仕様に従うように配置されているため、<br>要素は常にすべてのブラウザーでレンダリングされますが、場合によってはその効果が隠されます。

質問のこの特定のコンテキストで<br>および<p>タグがどのように機能するかをより深く理解すると、その理由が理解できます。それでは、さらに詳しく見ていきましょう。

The <br> tag-コンテンツの後に適用すると、改行が残ります。2つの<br>タグは、段落間で見えるように、表示されているテキスト間に1行のスペースを残すことができます。 注：<br>タグの設計により、2つの連続する<br>タグの後に続くすべての<br>タグは、1行の空スペース（注：空行の1行は、通常、改行ではなくparagraph break）と呼ばれます。

The <p> tag-埋め込まれたコンテンツの両側に空白行があることを保証します（注：コンテンツの前後の空白行はコンテンツ内にあります） 、コンテンツ自体の一部として扱われます）。改行は考慮されません（注：空白行を残すには2つの改行が必要です（Paragraph Break）ie; 2つの<br>タグ＆2つの後続の<br>タグの後に続く<br>タグは、改行ではなく空のスペースの行を挿入します。） 。

次のコードスニペットをご覧ください。

1。

<p>This is a paragraph.</p>
This is a paragraph.

上記のコードスニペットで、テキストの最初の行が<p>タグ内にあり、2行目がそうでないことを確認します。これは、上記のように機能します。

2。

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

上記のコードスニペットでは、両方のテキストが2つの別々の<p>タグ内に埋め込まれていますが、それらの間には空白行が1行しかありません。これは、<p>タグは、テキスト/コンテンツの一部であるスペースの空行のみを考慮し、空のスペース行を残すためです。以下のコードスニペットを確認すると、より明確になります。

3。

<p>This is a paragraph.<br></p>
<p>This is a paragraph.</p>

上記のコードスニペットでは、単一の<br>タグがfirst <p> tag内に埋め込まれていますが、単一の<br>は空の行に相当しないことがわかりますスペース（空のスペース行と同等になるには2つの<br>タグが必要です）。つまり、空の空白行は最初のテキストコンテンツの一部ではありませんなので、<br>タグの効果はわかりません。単一の改行は空白行＆と同等ではないためです。 <p>タグは、それ自体の1行のスペースを挿入する前に、先行するスペース行のみを考慮します。設計上、<p>タグは、要素内の空白行をその要素の一部と見なします。そのため、要素の終わりに向かって空白行がある場合、<p>タグは引き続き独自の空白行を1行残して、コンテンツの既存の空白行に余分な空白行を追加します。次の例を見てください。

4。

<p>This is a paragraph.<br><br></p>
<p>This is a paragraph.</p>

上記のコードスニペットでは、2つの<br>タグがfirst <p> tagの内部に挿入されているため、-first <p>タグ。 second <p> tagは、この空の行をfirst <p> tag内のコンテンツの一部と見なし、独自の行を挿入する前のコンテンツの後に1行のスペースがある場合、余分な空白行が追加されているように見えます。

5。

<p>This is a paragraph.<br><br><br></p>
<p>This is a paragraph.</p>

上記のコードスニペットでは、3つの<br>タグがfirst <p> tag、の一部であることがわかります。ここで上にスクロールして機能を確認します最初ので説明した<br>タグのように、2行の空白スペースが内部のコンテンツの一部であることがわかりますfirst <p> tag 、したがって、いずれかの<p>タグ間のスペースは、3行の空スペースになります（3つの<br>タグにより2行の空行、後続の<p>タグにより1行の空行） 。

これがあなたの疑問に対処することを願っています。これも参照してください 親が高さを持っている場合、BRタグは効果がありません 、別の見方をします。

0
akhil.das.panicker