Comment changer la hauteur d'un bonnet?
J'ai un gros paragraphe de texte qui est divisé en sous-paragraphes avec <br> 's:
<p>
Blah blah blah.
<br/>
Blah blah blah. Blah blah blah. Blah blah blah.
<br/>
Blah blah blah.
</p>
Je veux creuser le fossé entre ces sous-paragraphes, comme s'il y avait deux <br> ou quelque chose du genre. Je sais que la bonne façon de faire est d’utiliser <p></p>, mais pour l’instant, je ne peux pas changer cette disposition, je recherche donc une solution uniquement en CSS.
J'ai essayé de configurer <br>'s line-height et height avec display: block, j'ai aussi googlé et Stack Overflow-ed brièvement, mais je n'ai trouvé aucune solution. Est-ce même possible sans changer la mise en page?
Css:
br {
display: block;
margin: 10px 0;
}
La solution n'est probablement pas compatible avec tous les navigateurs, mais c'est au moins quelque chose. Pensez également à définir line-height:
line-height:22px;
Pour Google Chrome, considérez paramètre content:
content: " ";
Autre que cela, je pense que vous êtes coincé avec une solution JavaScript.
Voici la solution correcte queréellementsupporte plusieurs navigateurs:
br {
line-height: 150%;
}
Les personnes ci-dessus ont donc fondamentalement une réponse similaire, mais la voici très succincte. Fonctionne dans Opera, Chrome, Safari et Firefox, probablement IE également?
br {
display: block; /* makes it have a width */
content: ""; /* clears default height */
margin-top: 0; /* change this to whatever height you want it */
}
Une autre méthode consiste à utiliser unHR. Mais, et voici la partie la plus rusée, rendez-le invisible.
Ainsi:
<hr style="height:30pt; visibility:hidden;" />
Pour créer une pause BR plus propre simulée à l'aide du HR: Btw fonctionne dans tous les navigateurs !!
{ height:2px; visibility:hidden; margin-bottom:-1px; }
Autant que je sache, <br> n'a pas a une hauteur, il force simplement un saut de ligne. Vous avez un texte avec des sauts de ligne en plus des sauts automatiques, pas sous-paragraphes. Vous pouvez modifier l'interligne, mais cela affectera toutes les lignes.
Je viens d'avoir ce problème, et je l'ai contourné en utilisant
<div style="line-height:150%;">
<br>
</div>
vous pouvez appliquer line-height sur cet élément <p> pour que les lignes deviennent plus grandes.
Je n'ai jamais essayé le pseudo-élément :before:after CSS2 auparavant, principalement parce qu'il n'est pris en charge que par IE8 _/(ceci concerne les navigateurs IE). Cela pourrait être la seule solution CSS possible:
br:before {
display: block;
margin-top: 10px;
content: "";
}
Voici un exemple sur QuirksMode .
Et rappelez-vous que l'utilisation (incorrecte) de la balise <hr> comme suggéré quelque part mettra fin à la balise <p>;.
Si f.ex. quelque chose est stylé sur le <p> environnant, ce style a disparu pour le reste du contenu après l'insertion du <hr>.
Fait intéressant, si l'étiquette de rupture est écrite en pleine forme comme suit:
<br></br>
alors la hauteur de ligne CSS: 145% fonctionne. Si l'étiquette de rupture est écrite comme suit:
<br> or
<br/>
alors cela ne fonctionne pas, du moins dans Chrome, IE et Firefox. Bizarre!
Je pensais que vous pourriez peut-être utiliser:
br:after {
content: ".";
visibility: hidden;
display: block;
}
Mais cela ne fonctionnait pas sur chrome ou firefox.
Je pensais juste que je mentionnerais cela au cas où cela se produirait et que je leur épargne le problème.
br {
content: "";
margin: 2em;
display: block;
margin-bottom: -20px;
}
Fonctionne dans Firefox, Chrome & Safari . N'a pas été testé dans Explorer. (Windows-tablette est hors tension.)
Les sauts de ligne, taille de police fonctionne différemment dans Firefox et Safari.
Voici une solution qui fonctionne dans IE, Firefox et Chrome. L'idée est d'augmenter la taille de police de l'élément br de la taille de corps de 14px à 18px et de réduire l'élément de 4px afin que la taille supplémentaire soit en dessous de la ligne de texte. Le résultat est 4px de blanc supplémentaire sous le br.
br
{
font-size: 18px;
vertical-align: -4px;
}
Michael et Yoda ont tous les deux raison. Ce que vous pouvez faire est d'utiliser la balise <p>, qui, en tant que balise de bloc, utilise une marge inférieure pour décaler le bloc suivant. Vous pouvez donc faire quelque chose de similaire pour obtenir un espacement plus grand:
<p>
A block of text.
</p>
<p>
Another block
</p>
Une autre alternative consiste à utiliser la balise block <hr>, avec laquelle vous pouvez définir explicitement la hauteur de l'espacement.
Ce qui fonctionne pour moi, c’est d’ajouter cet alignement entre les balises de paragraphe, ce n’est pas la meilleure solution.
<br style="line-height:32px">
-------- Modifier ---------
J'ai rencontré des problèmes avec PC/Mac avec cela ... Cela donne au texte la nouvelle hauteur de ligne mais ne fait pas le saut de ligne ... Vous voudrez peut-être faire des tests vous-même. Pardon!
<br /> prendra autant d’espace que la ligne remplie de texte de votre <p>, vous ne pouvez pas changer cela. Si vous voulez plus gros, cela signifie que vous voulez séparer les paragraphes, ajoutez donc un autre <p>. N'oubliez pas d'être le plus sémantique possible;)
Désolé si quelqu'un d'autre a déjà dit cela, mais la solution simple est de jouer avec votre "hauteur de ligne". Si vous utilisez trop de sauts de ligne, c'est simplement parce que la hauteur de votre ligne est trop élevée. Vous pouvez corriger cela en CSS (mais sachez que cela affectera tout ce qui utilise cette propriété) ou vous pouvez créer un style en ligne pour remplacer le CSS.
Je devais développer une solution pour convertir HTML en PDF et centrer le texte verticalement dans des cellules de tableau, mais rien ne fonctionnait sauf la saisie du <br> brut
Donc, pensant en dehors de la boîte, j'ai changé la taille verticale en ajustant la taille de la police (en pt).
<font style="font-size: 4pt"><br></font>
Essayez d’utiliser l’attribut CSS line-height sur votre balise p qui contient la balise br. N'oubliez pas que vous pouvez id vos balises p si vous souhaitez l'isoler, même s'il peut être préférable d'utiliser un div pour l'isolation, IMO.
Vous ne semblez pas être en mesure de régler la hauteur d'un BR, mais vous pouvez le faire disparaître de manière fiable en utilisant display: none
Je suis tombé sur cette page en cherchant une solution aux problèmes suivants:
Dans certaines situations, les passerelles de paiement tierces (Worldpay) vous permettent uniquement de personnaliser leurs pages de paiement avec un maximum de 10 000 CSS et HTML (aucun script autorisé) à injecter dans le corps de leur modèle, et après quelques balises BR, FONT, etc. . Couplée à leur DTD qui force IE7/8 en mode Quirks, la personnalisation entre navigateurs devient aussi difficile que possible!
Désactiver les BR rend les choses beaucoup plus cohérentes ...
vous pouvez également utiliser la propriété "block-quote" en CSS. Cela ferait en sorte que cela n'affecterait pas vos lignes individuelles mais vous permettrait de définir des paramètres uniquement pour les sauts entre les paragraphes ou les "guillemets".
METTRE À JOUR:
Je me suis trompé. "blockquote" est en fait une propriété html. Vous l’utilisez exactement comme <p> et </ p> dans votre travail. Vous pouvez ensuite définir les paramètres de votre devis en css comme
blockquote { margin-top: 20px }
J'espère que cela t'aides. Ceci est similaire au réglage des paramètres sur le br et peut être compatible ou non avec le navigateur.
Utilisez <div>
<div>Content 1</div>Content 2
Cela permet une nouvelle ligne sans aucun espace vertical.
Cela devient
<div>Content 1</div>Content 2j'utilise ces méthodes, mais je ne sais pas si plusieurs navigateurs
================= Méthode 1 ==================
br {
display:none;
}
OU
================= Méthode 2 ==================
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
br:before {
display: block;
margin-top: 2px;
content: "";
}
br:after {
content: ".";
visibility: hidden;
display: block;
}
OU
================= Méthode 3 ==================
br:after { content: "" }
br { content: "" }
Répondez à un niveau plus général à toute personne ayant atterri ici car elle corrige des problèmes d'espacement causés par la balise <br> Je dois faire beaucoup de réinitialisations pour me rapprocher du pixel parfait.
br {
content: " ";
display: block;
}
Pour le problème spécifique que je traitais, il me fallait un espace spécifique entre les lignes. J'ai ajouté une marge en haut et en bas.
br {
content: " ";
display: block;
margin: 0.25em 0;
}
<span style="line-height:40px;"><br></span>
Vous devez le faire en ligne et sur chaque
élément, mais cela devrait fonctionner sur la plupart des navigateurs Violonez la hauteur de trait pour obtenir l’effet souhaité. Si vous le faites en ligne sur chaque élément, cela devrait fonctionner avec la plupart des navigateurs et des courriels (mais c'est trop complexe pour être discuté ici).
<br> est pour un saut de ligne. <br /> est aussi pour le saut de ligne, le "/" éventuellement nécessaire pour les éléments void ou pour xhtml.
En utilisant <br></br>, les navigateurs insèrent deux sauts de ligne car les deux sont "pratiquement" identiques.
Il n’ya aucun moyen d’augmenter la taille d’un saut de ligne car il s’agit d’un saut de ligne.
Utilisez un div avec vilibility défini sur hidden (<div style="vilibility:hidden; line-height:150%;"</div>) ou, mieux encore, un paragraphe.
Si le but est d’ajouter un peu d’espace vertical supplémentaire après la balise <br>, sans casser le paragraphe logique, une solution de ce type fera l'affaire. Cela fonctionne bien dans tous les navigateurs:
<span style="vertical-align:-37%"> </span><br>
Voici une page de démonstration contenant d'autres variantes du thème:
http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html
Cela a fait l'affaire pour moi quand je ne pouvais pas obtenir l'espacement de style pour fonctionner à partir de la balise span:
<p style='margin-bottom: 5px' >
<span>I Agree</span>
</p>
<span>I Don't Agree</span>
Je l'ai obtenu pour fonctionner dans IE7 en utilisant une combinaison de solutions, mais enveloppant principalement le Br dans DIV comme le suggéraient Nigel et d'autres. Ajout de l'identifiant et de l'exécution sur = "serveur" afin que je puisse supprimer le BR lors de la suppression de la case à cocher de la rangée de cases à cocher.
.narrow {
display: block;
margin: 0px;
line-height: 0px;
content: " ";
}
<div class="narrow" run at="server"><br></br></div>
Peut-être utiliser deux balises br est la solution la plus simple qui fonctionne avec tous les navigateurs. Mais c'est répétitif.
<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>