La balise <hr> (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" grâce à la propriété clear qui lui permet de gérer les débordements dûs aux positionnements flottants.

1) 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 :

• http://www.sitepoint.com/examples/hr/ [en]
• http://www.sovavsiti.cz/css/hr.html [en]
• http://www.saila.com/usage/tips/defn.shtml?hr [en]
• http://www.blakems.com/experimental/hr/ [en]
• http://www.nanoum.net/blog/4_apparence_hr.html [fr]
• http://bitesizestandards.com/bites/styling-horizontal-rules-with-css [en]
• http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html [en]

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.

2) 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.

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.

CSS :
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.