La balise hr

La balise hr définit une ligne horizontale de séparation. L'avantage de cette balise est que pour tracer une ligne unique, il n'est pas nécessaire de créer des blocs supplémentaires. Ne nécessite pas de balise fermante.

Exemple

Voyons comment fonctionne la balise hr :

html<hr>

Результат:

Exemple

Essayons de changer la couleur de la ligne à l'aide de la propriété CSS border-color :

html<hr style="border-color: red;">

Результат:

Exemple

La couleur de la ligne peut également être modifiée avec la propriété color (cependant, si les propriétés color et border-color sont définies simultanément - la seconde a la priorité) :

html<hr style="color: red">

Результат:

Exemple

Changeons maintenant la couleur de la ligne avec la propriété CSS border. Remarquez que la ligne deviendra alors double épaisseur (car nous avons défini une bordure en haut et en bas) :

html<hr style="border: 1px solid red;">

Результат:

Exemple

Essayons de changer la couleur de la ligne avec la propriété CSS border-top, et définissons uniquement la bordure supérieure. Maintenant, il n'y aura plus de ligne double :

html<hr style="border-top: 1px solid red;">

Результат:

Exemple

Créons une ligne en pointillés avec la propriété CSS border-top, définissons la valeur dotted au lieu de solid :

html<hr style="border-top: 1px dotted red;">

Результат:

Exemple

Augmentons l'épaisseur de la ligne avec la propriété CSS border-width :

html<hr style="border-width: 10px; border-color: red;">

Результат:

Exemple

Maintenant, ajoutons une hauteur height à la ligne et une bordure via border. La bordure se divisera alors en partie supérieure et inférieure :

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Voir aussi