web-dev-qa-db-fra.com

Le CSS a-t-il remplacé <br/>?

De nos jours, je vois de nombreux sites Web ayant peu ou pas de <br/> Mots clés. Le CSS a-t-il évité le besoin de <br/>, ou est <br/> toujours utile?

Je demande ceci afin de savoir si j'utilise ou non <br/> A l'avenir.

htmlcssline-breaks
18
Mohammad Areeb Siddiqui

Comme D.A.a dit , parfois <br> est approprié et parfois non - cela dépend de l'utilisation que vous en faites. Voici quelques exemples de quel CSS utiliser au lieu de <br>, dans les cas où <br> n'est pas approprié.

Marge verticale ou rembourrage

Si vous utilisez <br> pour ajouter un espace vertical juste parce qu'il est plus joli (pas parce que les sauts de ligne font partie du contenu), vous devez utiliser une marge verticale ou un remplissage. Au lieu de cela:

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

Vous pourriez vouloir ceci:

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

.foo { margin-bottom: 2em; }

Selon la situation, vous souhaiterez peut-être modifier la distance 2em, ou en utilisant padding au lieu de margin, ou placez l'espace en haut de .bar au lieu du bas de .foo.

display: block

Si vous utilisez un seul <br> pour couper une ligne en deux uniquement pour un effet visuel, il serait préférable d'utiliser display: block. Si vous avez ce HTML dans un formulaire:

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

alors vous devriez faire quelque chose comme ça à la place:

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

form label { display: block; }

<label>s sont display: inline par défaut, ce qui signifie qu'ils peuvent s'asseoir sur une ligne avec un autre texte. Lorsque vous créez un élément display: block et ne définissez pas son width sur une valeur fixe comme 100px, l'élément se développe pour remplir la ligne entière, forçant l'élément suivant à la ligne suivante.

22
Rory O'Kane

<br> est une balise valide. Mais ce n'est qu'un saut de ligne. Vous n'avez généralement PAS BESOIN de sauts de ligne car il existe généralement des balises beaucoup plus sémantiquement significatives à utiliser pour formater votre contenu. Mais tout dépend du contexte.

Il serait préférable de nous demander si une utilisation spécifique du <br> tag est logique. Publiez quelques exemples de la façon dont vous l'utilisez.

14
DA.

<br> les balises sont faciles à utiliser, assurez-vous de les utiliser correctement. Si vous en utilisez plusieurs pour obtenir un espacement supplémentaire, vous devriez plutôt utiliser css. Une utilisation courante de <br> tag est lors de l'insertion de quelque chose comme une adresse.

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

Essayez de ne pas les utiliser pour la présentation, si vous avez besoin de plus d'un saut de ligne, utilisez la marge ou le remplissage dans css.

Ne faites pas ça

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

Utilisation <br> chaque fois que content contient un saut de ligne. Il y a quelques cas:

  • Dans un forum, si l'affiche signe son message:

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

  • Pour les adresses postales, s'il serait exagéré d'utiliser des <div>s chacun avec sa propre classe pour le nom, la rue, l'état etc.

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

  • Plus généralement, si les utilisateurs peuvent saisir du texte formaté et que quelqu'un saisit un saut de ligne unique.

5
Yogu