web-dev-qa-db-ja.com

CSSは<br/>置き換えられましたか？

現在、<br/>タグがほとんどまたはまったくない多くのWebサイトが見られます。 CSSは<br/>の必要性を回避しましたか、それとも<br/>はまだ有用ですか？

今後、<br/>を使用するかどうかを確認できるようにお願いします。

htmlcssline-breaks
18
Mohammad Areeb Siddiqui

D.A。が述べた のように、 <br> が適切な場合とそうでない場合があります。それは、何に使用するかによって異なります。 <br>が適切でない場合に、<br>の代わりに使用するCSSの例をいくつか示します。

垂直マージンまたはパディング

<br>を使用して垂直方向のスペースを追加する場合は、見栄えが良いだけでなく（改行がコンテンツの一部であるためではない）、垂直方向のマージンまたはパディングを使用する必要があります。これの代わりに：

<div class="foo">some content</div>
<br><br>
<div class="bar">more content</div>

あなたはこれが欲しいかもしれません：

<div class="foo">some content</div>
<div class="bar">more content</div>

.foo { margin-bottom: 2em; }

状況によっては、距離を変更したい場合があります2em、またはpaddingの代わりにmarginを使用するか、代わりに.barの上部にスペースを置きます.fooの下部。

display: block

単一の<br>を使用して、視覚効果のためだけに行を2つに分割する場合は、display: blockを使用することをお勧めします。このHTMLがフォームにある場合：

<label for="first-name">First name:</label>
<br>
<input type="text" id="first-name" name="first-name" />

次に、代わりに次のようなことを行う必要があります。

<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name" />

form label { display: block; }

<label>sはデフォルトでdisplay: inlineです。つまり、他のテキストと同じ行に配置できます。要素をdisplay: blockにし、そのwidthを100pxのような固定値に設定しない場合、要素は行全体を埋めるように拡張され、次の要素に強制されますライン。

22
Rory O'Kane

<br>は有効なタグです。しかし、それは改行です。通常、コンテンツのフォーマットに使用する意味的に意味のあるタグがはるかに多いため、改行は必要ありません。しかし、それはすべて状況に依存します。

<br>タグは意味があります。使用例をいくつか投稿してください。

14
DA.

<br>タグは問題なく使用できます。適切に使用するようにしてください。スペースを増やすために複数を使用している場合は、代わりにcssを使用する必要があります。 <br>タグの一般的な用途は、住所などを挿入する場合です。

<p>Company Name<br>
Address Line 1<br>
Address Line 2<br>
City, State, Zip</p>

プレゼンテーションにそれらを使用しないようにしてください。複数の改行が必要な場合は、CSSでマージンまたはパディングを使用してください。

これを行わないでください

<p>some paragraph text</p>
<br><br><br>
<p>more content</p>
9
ferne97

contentに改行が含まれる場合は常に<br>を使用します。いくつかのケースがあります：

  • フォーラムで、投稿者が自分の投稿に署名した場合：

    <p>See you,<br>Jon Doe<br>

  • 住所の場合、名前、番地、州などの独自のクラスを持つ専用の<div>sを使用するのはやり過ぎです。

    <p>Jon Doe<br>Sunrise Avenue 123<br>Saint Nowhere</p>

  • より一般的には、ユーザーがフォーマットされたテキストを入力でき、誰かが単一の改行を入力した場合。

5
Yogu