Quand les éléments <br> sont-ils ignorés dans un paragraphe?
J'ai découvert que parfois, <br> les éléments ne sont pas rendus dans les navigateurs que j'utilise (Firefox et Chrome).
<p>Hello<br></p>
<p>Hello<br></p>
sera rendu de la même manière que:
<p>Hello</p>
<p>Hello</p>
De la même manière,
<p>Hello <a href="https://ddg.gg">ddg<br></a></p>
<p>Hello</p>
et :
<p>Hello <a href="https://ddg.gg">ddg</a></p>
<p>Hello</p>
sera également rendu sans aucun saut de ligne lorsqu'il est ouvert dans le navigateur.
Je n'ai pas pu trouver la section dans la spécification HTML qui spécifie ce comportement, savez-vous où trouver la spécification pour cela ou pourriez-vous exprimer ce comportement d'une manière simple?
Je serais également intéressé par les raisons d'avoir ce comportement si vous les connaissez.
EDIT : Je sais qu'il est tout à fait "incorrect" de placer des éléments br à cette position dans le HTML, je ne suis pas celui qui génère ce HTML, mais J'ai besoin de convertir ce HTML dans un autre format, donc je suis intéressé à comprendre comment les navigateurs gèrent ce cas.
Pourquoi nous utilisons balise br - L'élément HTML br produit un saut de ligne dans le texte (retour chariot) . chariot-return ou return est un caractère de contrôle ou un mécanisme utilisé pour réinitialiser la position d'un périphérique au début d'une ligne de texte .
Point à Remarque:
Si vous vérifiez les dimensions de la balise br , elle a une largeur = 0 et une hauteur (~ 18px). Mais si vous l'utilisez dans la balise p alors la balise br prend la balise hauteur de p élément mais l'important est que sa propre largeur soit 0.
Réponse à votre question
si nous l'utilisons comme = <p>Hello<br></p> alors vous pourrez voir l'élément br dans la console développeur mais pas d'espace supplémentaire, car nous ne le faisons pas ' t avoir de texte après br tag et sa propre largeur est 0, donc la largeur globale devient zéro. Par conséquent, il ne prend pas d'espace supplémentaire ni de saut de ligne. Exemple -
p {
margin: 0;
}<p>Hello<br></p>
<p>Hello<br></p>Mais si nous avons un code comme celui-ci - <p>Hello<br>World</p> then br tag amène le curseur au début de la ligne suivante et nous avons du texte après br tag avec une certaine largeur. Ainsi, nous pourrons voir de l'espace supplémentaire ou un saut de ligne. Exemple -
p {
margin: 0;
}<p>Hello<br>World</p>
<p>Hello<br>World</p>Et je suis d'accord que ce n'est pas le bon endroit pour utiliser la balise br car l'élément p ajoutera automatiquement un saut de ligne. Donc, utiliser br tag juste avant end p tag n'a aucun sens.
Veuillez vérifier les liens ci-dessous:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element
Trouvé cette réponse qui donne une explication beaucoup plus élégante que je n'ai jamais pu trouver. Je vais essayer de résumer et de l'appliquer à votre situation. Jetons un autre regard sur votre code.
<p>hello<br/></p>
<p>howdy</p>
<hr/>
<p>hello</p>
<p>howdy</p>
Le code au-dessus et en dessous de la règle horizontale rend exactement la même chose.
POURQUOI?
Eh bien, comme l'explique l'utilisateur Rei, c'est parce que "l'élément BR n'est pas du tout ignoré. Il marque que la ligne doit être interrompue à ce point. En d'autres termes, il marque la fin du ligne courante de texte. Il ne s'agit pas de créer de nouvelles lignes. " Nous savons qu'elle n'est pas ignorée car nous sommes capables de lui appliquer des styles. Comme je l'ai découvert plus tôt, rendre la marge plus grande que la valeur par défaut révèle que la rupture est toujours là.
Pensez à regarder l'autre réponse pour plus de détails. L'utilisateur qui a posé la question est censé créer un programme similaire, et la réponse contient de nombreux exemples et de la documentation liés. p et div sont tous les deux éléments de niveau bloc, alors gardez cela à l'esprit lorsque vous lisez l'article.
TLDR: BR ne crée pas automatiquement une nouvelle ligne, il marque simplement la fin de la ligne de texte actuelle.
Les éléments <br> Sont toujours rendus dans tous les navigateurs, puisque tous les navigateurs sont alignés pour suivre une spécification particulière modifiée par le consortium W3C, mais dans certains cas, leurs effets sont masqués.
Vous comprendrez pourquoi il en est ainsi lorsque vous aurez une perspective plus approfondie sur le fonctionnement des balises <br> Et <p> Dans ce contexte particulier de votre question. Alors, regardons de plus près.
La balise <br> - Lorsqu'elle est appliquée après un contenu, elle laisse un saut de ligne, deux balises <br> Peuvent quitter simultanément une seule ligne d'espace entre les textes visibles comme vu entre les paragraphes. Remarque: En vertu de la conception des balises <br>, Chaque balise <br> Suivante après deux <br> les balises insèrent une seule ligne d'espace vide ( Remarque: Une seule ligne d'espace vide est classiquement connue sous le nom de saut de paragraphe ) au lieu d'un saut de ligne.
La balise <p> - Cela garantit qu'il y a une ligne d'espace vide de chaque côté du contenu intégré (Remarque: Le les lignes d'espace vides dans le contenu qui le précède ou le succède sont traitées comme faisant partie du contenu lui-même). Il ne prend en compte aucun saut de ligne ( Remarque: Il faut deux sauts de ligne pour laisser une ligne d'espace vide ( Saut de paragraphe ) ie; 2 balises <br> & toutes les balises <br> Suivantes après 2 balises <br> Conséquentes insèrent une ligne d'espace vide au lieu d'un saut de ligne.) .
Jetez un œil aux extraits de code suivants.
1.
<p>This is a paragraph.</p>
This is a paragraph.Dans l'extrait de code ci-dessus, voyez que la première ligne de texte se trouve dans la balise <p> Alors que la deuxième ligne ne l'est pas, et qu'elle fonctionne comme je l'ai décrit ci-dessus.
2.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>Dans l'extrait de code ci-dessus, les deux textes sont intégrés dans 2 balises <p> Distinctes, mais il n'y a toujours qu'une seule ligne d'espace vide entre eux. C'est parce que la balise <p> Ne prendra en compte que les lignes d'espace vides qui font partie du texte/contenu tout en laissant sa propre ligne d'espace vide. Vous obtiendrez plus de clarté en examinant les extraits de code ci-dessous.
3.
<p>This is a paragraph.<br></p>
<p>This is a paragraph.</p>Dans l'extrait de code ci-dessus, une seule balise <br> Est intégrée dans la première balise <p>, mais voyez qu'une single <br> n'est pas équivalent à une ligne d'espace vide (il faut 2 balises <br> pour être équivalent à une ligne d'espace vide). Donc une ligne d'espace vide ne fait pas partie de notre premier contenu texte donc vous ne verrez pas l'effet de la balise <br>, Comme un un saut de ligne simple n'est pas équivalent à une ligne d'espace & <p> la balise ne prend en compte que les lignes d'espace précédentes avant d'insérer sa propre ligne d'espace. En vertu de la conception, la balise <p> Considérera les lignes d'espace vides dans un élément comme faisant partie de cet élément, donc dans le cas où un élément a des lignes d'espace vides vers sa fin, alors le <p> La balise laisse toujours sa propre ligne d'espace vide, ajoutant ainsi une ligne vierge supplémentaire aux lignes d'espaces déjà existantes du contenu, Regardez l'exemple qui suit.
4.
<p>This is a paragraph.<br><br></p>
<p>This is a paragraph.</p>Dans l'extrait de code ci-dessus, 2 balises <br> Ont été insérées dans la première balise <p> donc elle laisse un vide ligne d'espace faisant partie de la première balise <p>. La deuxième balise <p> considérera cette ligne d'espace vide comme une partie du contenu dans le la première balise <p> et quand il insère sa propre ligne d'espace après le contenu précédent, il semble qu'une ligne d'espace vierge supplémentaire y ait été ajoutée.
5.
<p>This is a paragraph.<br><br><br></p>
<p>This is a paragraph.</p>Dans l'extrait de code ci-dessus, vous pouvez voir que 3 balises <br> Font partie de la première balise <p>, maintenant, faites défiler vers le haut et regardez le fonctionnement des balises <br> comme je l'ai décrit au début, vous pouvez voir que maintenant 2 lignes d'espace vide font partie du contenu à l'intérieur première balise <p>, donc l'espacement entre les balises <p> est de 3 lignes d'espace vide (2 lignes vides en vertu de 3 balises <br> et 1 ligne vide en vertu de la balise <p> suivante).
J'espère que cela répond à vos doutes, veuillez également faire référence à ceci la balise BR n'a aucun effet lorsque le parent a de la hauteur , pour obtenir une perspective différente.