Maison > Article > interface Web > Comment changer la hauteur de la balise br ?

Comment changer la hauteur de la balise br ?

WBOYavant: 2023-09-11 17:29:02966parcourir

La balise

est un élément HTML couramment utilisé pour ajouter des sauts de ligne dans le contenu Web. Parfois, cependant, la hauteur préexistante de discontinuité entre les lignes peut être jugée insuffisante et les écarts entre les lignes consécutives d'un document écrit doivent être augmentés. Dans cette discussion, nous explorerons différentes manières de modifier la hauteur de la balise
, notamment en utilisant la propriété CSS line-height et en ajoutant des éléments d'habillage auxiliaires. Que vous soyez un développeur Web débutant ou expérimenté, ce manuel vous donnera une compréhension complète de la façon d'ajuster la hauteur de la balise
dans votre conception Web.

Méthode

Nous verrons deux manières différentes de modifier visiblement la hauteur de la balise br. Ils sont les suivants -

Utilisez la propriété CSS line-height
Ajouter des sauts de ligne supplémentaires

Méthode 1 : Utiliser la propriété CSS line-height

La technique standard pour modifier la hauteur des sauts de ligne consiste à utiliser une propriété CSS appelée line-height. Cet attribut est utilisé pour ajuster la hauteur des lignes de texte et peut également être utilisé sur l'élément parent de la marque
pour élargir l'espace entre les lignes.

Ce bloc de code restitue un document HTML contenant un en-tête décrivant la tâche à accomplir et un composant de paragraphe contenant plusieurs lignes de langage écrit, séparées par la balise "br". Le style CSS appliqué à cet élément de paragraphe spécifie une « hauteur de ligne » de 3, ce qui fait que l'espacement vertical entre les lignes de texte est trois fois supérieur à la hauteur de ligne normale.

Exemple

Voici le code final que nous utiliserons dans cet exemple -

<!DOCTYPE html>
<html>
<head>
   <title>How to change the height of br tag?</title>
   <style>
      p {
         line-height: 3;
      }
   </style>
</head>
<body>
   <h4>How to change the height of br tag?</h4>
   <p>
      This is some text in line 1.
      <br>
      This is some text in line 2.
   </p>
</body>
</html>

Méthode 2 : Ajouter des sauts de ligne supplémentaires

Une autre façon de modifier la hauteur du saut de ligne consiste à ajouter une balise
supplémentaire. Cela créera plus d'espace entre les lignes de texte, ce qui est particulièrement utile lorsque la propriété line-height n'est pas suffisante.

Exemple

Le code ci-dessous est une séquence d’instructions simple. Comme on peut le constater, un grand nombre de balises
sont utilisées pour améliorer la perceptibilité de l'étendue verticale des balises
entre deux lignes consécutives d'écriture ou d'impression.

<!DOCTYPE html>
<html>
<head>
   <title>How to change the height of br tag?</title>
</head>
<body>
   <h4>How to change the height of br tag?</h4>
   <p>
      This is some text in line 1.
      <br><br><br>
      This is some text in line 2.
   </p>
</body>
</html>

Conclusion

Pour résumer, la taille verticale d'une balise
peut être modifiée en utilisant la propriété CSS line-height et en la complétant avec un élément de saut de ligne. Maîtriser la technique d'ajustement de la hauteur de la balise
est un aspect important du développement Web et une capacité très bénéfique pour créer un contenu Web visuellement attrayant avec un interligne exceptionnel.

Apprendre à changer la hauteur de la balise
est très important pour optimiser l'expérience utilisateur sur votre site Web. En suivant les méthodes décrites dans cet article, vous pouvez facilement modifier la hauteur du marqueur
en fonction des exigences de votre tâche spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：À quoi sert la méthode fill() en JavaScript ?Article suivant：À quoi sert la méthode fill() en JavaScript ?

Articles Liés

Voir plus