La balise <hr> [fr] (ou <hr /> en XHTML), qui signifie "horizontal rule", est une règle horizontale servant de séparation.
L'une de ses utilisations courantes est de servir de "spacer" [fr] grâce à la propriété clear [fr] qui lui permet de gérer les débordements dûs aux positionnements flottants.
Styler la balise HR
Le premier problème à contourner est alors celui de la décoration de la balise <hr> puisque les différents navigateurs ne sont pas d'accord entre eux.
Certains liens anglophones sont alors bien utiles :
On y apprend, entre autre, que la couleur de la règle se définit soit par la propriété color, soit par background-color.
Les marges de HR
Cependant, un problème de marge apparaît irrémédiablement sur Internet Explorer : quoi que l'on fasse il reste un espace entre la règle et le contenu qui la précède (figure 1).
Voici le code employé ainsi que le rendu sur IE et les autres navigateurs :
div {background: green; color: white}
hr {
height: 1px;
margin: 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}
<div>texte</div>
<hr />
Malgré différents essais et un post sur le forum [fr], cette marge haute semble incompressible.
Cette impression est renforcée par une autre lecture [en] qui confirme qu'il s'agit d'un bug IE et que la solution serait d'englober la balise <hr /> dans un conteneur <div>.
Une piste à suivre
Une autre méthode semblerait porter ses fruits dans une certaine mesure : appliquer des marges verticales négatives de la hauteur d'un demi caractère de référence.
hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}
Cette méthode réduit l'espace supérieur sur IE (pas l'espace inférieur), sans - curieusement - modifier le comportement sur les geckos.
A tester sur d'autres navigateurs pour confirmer ou non la pertinence de cette technique...