Verwenden von br oder div für Abschnittsunterbrechung

Question

Ich habe an einigen Stellen gearbeitet und zwei verschiedene Methoden für einen Abschnitt oder Zeilenumbruch in HTML gesehen.

Ein Weg, ich habe es so gemacht gesehen:

<div class="placeholder-100pct">&nbsp;</div> 

und das andere ist einfach nur alte <br /> verwenden.

Irgendwelche Vorteile füreinander oder wäre es nur eine Frage des Stils?

Answer 1

Verwenden <br/>, wenn Sie eine neue Zeile in einem Absatz wollen, etwa so:

<p>Hi Josh, <br/> How are you?</p> 

Dies könnte nützlich sein, wenn eine Adresse schreiben:

<p>John Dough<br/> 
1155 Saint. St. #33<br/> 
Orlando, FL 32765 
</p> 

ein div verwenden, werden Sie automatisch eine geben neue Zeile, aber wenn Sie ein Leerzeichen zwischen zwei Elementen möchten, können Sie einen Rand auf dem Div verwenden.

Nicht Verwendung <br/> etwas Platz zwischen zwei divs zu bekommen:

<!-- This is not preferred --> 
<div>Hello</div> 
<br/> 
<div>Something else here</div> 

this helps

Answer 2

Ein div ist ein generischer Container. A br ist eine Linie Pause. Keines ist besonders gut geeignet, um einen Abschnittbruch auszudrücken.

HTML 5 führt sections ein. Sie markieren jeden Abschnitt, nicht den Bruch zwischen ihnen.

<section> 
    <!-- This is a section --> 
</section> 
<section> 
    <!-- This is another section --> 
</section> 

Answer 3

Verwenden Sie ein < br/> wenn es semantischen Sinn, dies zu tun macht. Wenn alles, was Sie brauchen, ein Zeilenumbruch ist, dafür ist es da. Wenn Sie versuchen, Abschnitte verschiedener Inhaltstypen aufzuteilen, sollte jeder Abschnitt in einem eigenen Container enthalten sein. Zum Beispiel, wenn Sie eine Adresse haben, wo jede Zeile der Adresse auf einer separaten Zeile zeigen würde, wäre es sinnvoll zu tun machen:

<address> 
123 Main Street<br /> 
Anywhere, USA 12345 
</address> 

Answer 4

Ein offensichtlicher Unterschied ist, dass <br> Inline-Element ist, während <div> nicht ist.

So folgt aus:

<span>Some text broken into <br /> lines</span> 

... gültig HTML-Code, während dies:

<span>Some text broken into <div>&nbsp;</div> lines</span> 

... ist nicht, wie Sie nicht Blockelemente innerhalb Inline-Elemente platzieren können.

Answer 5

<br> den Nachteil der Begrenzung der Größe der Lücke zwischen den Abschnitten mit dem line-height hat angewendet oder übernommen von der <span> sitzt es darin.

Mit anderen Worten, mit <br>, kann die Größe der Pause immer nur genau die Höhe einer Textzeile sein.

Umhüllen Sie Ihre "Abschnitte" in ihren eigenen Tags, und verwenden Sie Ränder, um den Abstand zu steuern, wenn Sie die Kontrolle über den Abstand beibehalten möchten. Der Unterschied liegt nicht nur in der Semantik des Markups.