28188 sujets

CSS et mise en forme, CSS3

[Résolu] Modifier l'écartement d'une hr double

Bonjour et meilleurs voeux.

Je cherche à créer une ligne horizontale double :

hr {
	border: 0;
	border-top: 3px double;
	margin: 1.5em auto;
	width: 30%;
}


J'obtiens à peu près le résultat escompté mais je voudrais augmenter l'écartement, ce que je n'arrive pas à faire, puisque si je modifie le nombre de pixels du border-top, j'augmente également l'épaisseur des traits.

Merci.
Administrateur
Hello,

En fait tu n'étais vraiment pas loin, et ton idée était bonne.

Plutôt que de partir sur un style "double" qu'on ne peut pas adapter, le plus simple est d'appliquer une bordure simple en haut et en bas et de gérer l'écart via la hauteur de ton hr :

hr {
  width: 30%;
  height: 50px;
  border-inline: 0;
  border-block: 1px solid;
  margin: 1.5em auto;
}


Exemple : https://codepen.io/raphaelgoetter/pen/mybqWVg

drphilgood a écrit :

2 <hr>
Je ne suis vraiment pas très fan de cette idée qui duplique inutilement (et qui serait gênante pour les assistances techniques, sauf à ajouter un `role="presentation"` sur le 2e `hr`)
Modifié par Raphael (03 Jan 2025 - 14:36)
Meilleure solution
Le double hr j'y avais songé, mais je me doutais qu'il y avait une possibilité. Comme ça j'aurai appris l'utilité de border-inline. Merci...
Prévenir un modérateur
Répondre au sujet
Aller à