Comment changer la hauteur d’un fichier?

J’ai un grand paragraphe de texte qui est divisé en sous-paragraphes avec les
-clés:

 

Blah blah blah.
Blah blah blah. Blah blah blah. Blah blah blah.
Blah blah blah.

Je veux élargir le fossé entre ces sous-alinéas, comme s’il y avait deux
ou quelque chose du genre. Je sais que la bonne façon de faire est d’utiliser

, mais pour le moment je ne peux pas changer cette disposition, donc je cherche une solution uniquement CSS.

J’ai essayé de régler la line-height et la height avec display: block , j’ai aussi Googled 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 du moins quelque chose. Envisagez également de définir la line-height :

 line-height:22px; 

Pour Google Chrome, envisagez de définir le content :

 content: " "; 

A part ça, je pense que vous êtes coincé avec une solution JavaScript.

Voici la solution correcte qui prend effectivement en charge plusieurs navigateurs:

  br { line-height: 150%; } 

Une autre méthode consiste à utiliser un HR . Mais, et voici la partie rusée, rendez-la invisible.

Ainsi:

 

Pour simuler une rupture BR plus propre en utilisant le HR: Btw fonctionne dans tous les navigateurs !!

 { height:2px; visibility:hidden; margin-bottom:-1px; } 

Donc, les peeps ci-dessus ont fondamentalement une réponse similaire, mais ici c’est très succinct. Fonctionne dans Opera, Chrome, Safari et Firefox, probablement sous IE aussi?

 br { display: block; /* makes it have a width */ content: ""; /* clears default height */ margin-top: 0; /* change this to whatever height you want it */ } 

Pour autant que je sache, la hauteur n’a pas d’ effet , mais force simplement un saut de ligne. Ce que vous avez est un texte avec quelques sauts de ligne en plus des sauts automatiques, pas des 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

 

vous pouvez appliquer une hauteur de ligne sur cet élément

, afin que les lignes deviennent plus grandes.

Je n’ai pas encore essayé le pseudo-élément :before / :after CSS2, principalement parce qu’il n’est supporté que dans IE8 (ceci concernant les navigateurs IE) . Cela pourrait être la seule solution CSS possible:

 br:before { display: block; margin-top: 10px; content: ""; } 

Voici un exemple sur QuirksMode .

De manière intéressante, si la balise break est écrite en entier comme suit:

 

puis la hauteur de ligne CSS: 145% fonctionne. Si la balise break est écrite comme suit:

 
or

alors ça ne marche pas, du moins dans Chrome, IE et Firefox. Bizarre!

Et rappelez-vous que l’utilisation de la


comme suggéré quelque part, mettra fin à la

, alors oubliez cette solution.
Si f.ex. quelque chose est stylé sur le

environnant, ce style a disparu pour le rest du contenu après l’insertion de


.

Michael et Yoda ont tous deux raison. Ce que vous pouvez faire est d’utiliser la

, qui, étant une balise de bloc, utilise une marge inférieure pour décaler le bloc suivant, de sorte que vous pouvez faire quelque chose de similaire pour obtenir un plus grand espacement:

 

A block of text.

Another block

Une autre alternative consiste à utiliser la


block


, avec laquelle vous pouvez définir explicitement la hauteur de l’espacement.

J’ai eu une pensée que vous pourriez être en mesure d’utiliser:

 br:after { content: "."; visibility: hidden; display: block; } 

Mais cela ne fonctionnait pas sur chrome ou firefox.

Je pensais juste que je mentionnerais que si cela arrivait à quelqu’un d’autre et que je leur épargnerais le problème.

Ce qui fonctionne pour moi, c’est d’append cette ligne entre les balises de paragraphe … mais pas la meilleure solution.

 

——– Modifier ———

J’ai rencontré des problèmes avec PC / Mac avec ceci … Cela donne au texte la nouvelle hauteur de ligne mais ne fait pas le saut de ligne … Vous pouvez faire quelques tests vous-même. Pardon!

Voici une solution qui fonctionne dans IE, Firefox et Chrome. L’idée est d’augmenter la taille de la police de l’élément br de la taille du corps de 14 à 18 pixels, et d’abaisser l’élément de 4 fois pour que la taille supplémentaire soit inférieure à la ligne de texte. Le résultat est 4px d’espaces supplémentaires en dessous du br.

 br { font-size: 18px; vertical-align: -4px; } 
 br { content: ""; margin: 2em; display: block; margin-bottom: -20px; } 

Fonctionne dans Firefox, Chrome et Safari. Je n’ai pas testé dans Explorer. (Windows-tablet est hors tension.)

Les sauts de ligne, la taille de la police fonctionnent différemment dans Firefox et Safari.


prendra autant d’espace que la ligne de texte de votre

, vous ne pouvez pas changer cela. Si vous voulez agrandir, cela signifie que vous voulez séparer en paragraphe, donc ajoutez d’autres

. N’oubliez pas d’être le plus sémantique possible;)

Vous ne semblez pas être capable d’ajuster la hauteur d’un BR, mais vous pouvez le faire disparaître de manière fiable à l’aide de l’affichage: none

Entré sur cette page en cherchant une solution à ce qui suit:

Je me trouve dans une situation où la passerelle de paiement tierce (Worldpay) vous permet uniquement de personnaliser ses pages de paiement avec 10 ko maximum de CSS et de HTML (aucun script autorisé) injectées dans le corps de leur modèle et après quelques balises, balises FONT, etc. Couplé à leur DTD qui force IE7 / 8 en mode Quirks, cela rend la personnalisation entre navigateurs aussi difficile que possible!

Désactiver le BR rend les choses beaucoup plus cohérentes …

J’utilise ces méthodes, mais je ne sais pas si cross-browser

================= 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: "" } 

Essayez d’utiliser l’atsortingbut de line-height CSS sur votre balise p contenant la balise br . N’oubliez pas que vous pouvez id vos balises p si vous souhaitez les isoler, bien qu’il soit préférable d’utiliser un div pour l’isolement, IMO.

Désolé si quelqu’un d’autre l’a déjà dit, mais la solution simple est de jouer avec votre “hauteur de ligne”. Si vous obtenez trop d’espace lorsque vous utilisez un saut de ligne, c’est simplement parce que votre hauteur de 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 faire un style en ligne pour remplacer le CSS.

Vous pouvez également utiliser la propriété “block-quote” dans CSS. Cela ferait en sorte que cela n’affecte pas vos lignes individuelles, mais vous permet de définir des parameters pour les pauses entre les paragraphes ou les “guillemets”.

METTRE À JOUR:
Je me suis trompé. “blockquote” est en fait une propriété HTML. Vous l’utilisez juste comme

et autour de votre travail. Vous pouvez ensuite définir les parameters de votre devis de bloc dans css comme

 blockquote { margin-top: 20px } 

J’espère que cela t’aides. Il est similaire à la configuration des parameters sur le br et peut être ou non compatible avec plusieurs navigateurs.


est pour un saut de ligne.

est aussi pour le saut de ligne, le “/” éventuellement nécessaire pour les éléments vides ou pour xhtml.
À l’aide de
, les navigateurs insèrent deux sauts de ligne car les deux sont “virtuellement” les mêmes.
Il n’y a aucun moyen d’augmenter la taille d’un saut de ligne car c’est juste un saut de ligne.
Utilisez un div avec vilibility défini sur hidden (

) ou mieux encore, un paragraphe.

 

Vous devriez le faire en ligne et sur chaque
element mais cela devrait fonctionner sur la plupart des navigateurs. Jouez avec la hauteur de ligne pour obtenir l’effet désiré. Si vous le faites en ligne sur chaque élément, il devrait fonctionner sur la plupart des navigateurs et des e-mails (mais cela est trop complexe à discuter ici).

Cela a fait le tour pour moi quand je ne pouvais pas obtenir l’espacement de style pour travailler à partir de la balise span:

  

I Agree

I Don't Agree

Si le but est d’append un peu d’espace vertical supplémentaire après le tag, sans casser le paragraphe logique, quelque chose comme ça fera l’affaire. Cela fonctionne bien dans tous les navigateurs:

  

Voici une page de démonstration contenant d’autres variantes sur le thème:

http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Utilisez

 
Content 1
Content 2

Cela permet une nouvelle ligne sans espace vertical.

Cela devient

 
Content 1
Content 2

Répondre à un niveau plus général à toute personne ayant atterri ici car elle corrige des problèmes d’espacement causés par l’étiquette. Je dois faire beaucoup de réinitialisations afin de me rapprocher du pixel parfait.

 br { content: " "; display: block; } 

Pour ce problème spécifique, je devais avoir 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; } 

Je l’ai fait fonctionner dans IE7 en utilisant un combo de solutions, mais en enveloppant principalement le DIV in comme suggéré par Nigel et d’autres. Ajout de l’ID et exécution de = = “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: " "; } 
 

Je devais développer une solution pour convertir le HTML en PDF, et centrer verticalement le texte dans les cellules du tableau, mais rien ne fonctionnait sauf en saisissant la plaine.

Donc, en dehors de la boîte, j’ai changé la taille verticale en ajustant la taille de la police (en pt).

 

Peut-être utiliser deux balises br est la solution la plus simple qui fonctionne avec tous les navigateurs. Mais c’est répétitif.

 

content



content



content