Comment puis-je changer l'épaisseur de ma balise <hr>

Je souhaite modifier l'épaisseur de ma règle horizontale (<hr> ) en CSS. Je sais que cela peut être fait en HTML comme ça -

<hr size="10">

Mais j'entends dire que cela est déconseillé comme mentionné sur MDN ici . En CSS, j'ai essayé d'utiliser height:1pxmais cela ne change pas l'épaisseur. je veux le<hr> ligne soit 0.5pxépaisse.

J'utilise Firefox 3.6.11 sur Ubuntu

Pour plus de cohérence, supprimez toutes les bordures et utilisez la hauteur pour l' <hr>épaisseur. L'ajout d'une couleur d'arrière-plan donnera un style <hr>à la hauteur et à la couleur spécifiées.

Dans votre feuille de style:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Ou en ligne comme vous l'avez:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Une explication plus longue ici

Rendu sous-pixel dans les navigateurs

Le rendu sous-pixel est délicat. Vous ne pouvez pas réellement vous attendre à ce qu'un moniteur affiche une ligne fine inférieure à un pixel. Mais il est possible de fournir des dimensions sous-pixel. Selon le navigateur, ils les rendent différemment. Consultez ce blog de John Resig à ce sujet.

Fondamentalement, si votre moniteur est un écran LCD et que vous dessinez des lignes verticales, vous pouvez facilement tracer une ligne 1/3 pixel. Si votre fond est blanc, indiquez la couleur de votre ligne #f0f. À l'œil nu, cette ligne mesurera 1/3 de pixel. Bien qu'il soit d'une certaine couleur, si vous agrandissez le moniteur, vous verrez qu'un seul segment du pixel entier (composé de RVB) sera sombre. C'est à peu près la technique utilisée pour les indications de type fin, c'est-à-dire ClearType .

Mais les lignes horizontales ne peuvent atteindre qu'un pixel plein. C'est la limitation technologique des moniteurs LCD. Les CRT étaient encore plus compliqués avec leurs luminophores triangulaires (sauf s'ils étaient du type à grille d'ouverture, c'est-à-dire Sony Trinitron), mais c'est une autre histoire.

Fondamentalement, fournir une dimension sous-pixel et s'attendre à ce qu'elle soit rendue de la même manière que s'attendre à ce qu'une variable entière stocke un nombre de 1,2034759349. Si vous comprenez que cela est impossible, vous devez comprendre que les moniteurs ne sont pas en mesure de restituer les dimensions sous-pixel.

Style sûr de navigateur croisé

Mais la façon dont les règles horizontales fondent se font généralement à l'aide de couleurs. Donc, si votre arrière-plan est par exemple blanc ( #fff), vous pouvez toujours faire votre HR très léger. Comme #eee.

Le style de sécurité croisé pour une règle horizontale très légère serait:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Et utilisez un fichier CSS au lieu de styles en ligne. Ils fournissent une définition centrale pour l'ensemble du site et pas seulement un élément particulier. Cela rend la maintenabilité bien meilleure.

Je cherchais le moyen le plus court pour dessiner une ligne 1px, car la charge entière de CSS séparé n'est pas la solution la plus rapide ou la plus courte.

Jusqu'à HTML5, le WAS était un moyen plus court pour 1px h: <hr noshade> mais .. L'attribut noshade de <hr> n'est pas pris en charge dans HTML5. Utilisez plutôt CSS. (ni aucun autre attribut utilisé auparavant, comme taille, largeur, alignement ) ...

Maintenant, celui-ci est assez délicat, mais fonctionne bien si la plus simple 1px h est nécessaire:

Variation 1, BLACK hr: (meilleure solution pour le noir)

<hr style="border-bottom: 0px">

Sortie: FF, Opera - noir / Safari - gris foncé

Variation 2, GREY hr (le plus court!):

<hr style="border-top: 0px">

Sortie: Opera - gris foncé / FF - gris / Safari - gris clair

<hr style="border: none; border-bottom: 1px solid red;">

Sortie: Opera / FF / Safari: 1px rouge.

Je recommanderais de définir le HRlui - même pour être 0pxélevé et d'utiliser sa bordure pour être visible à la place. J'ai remarqué que lorsque vous zoomez et dézoomez (ctrl + molette de la souris), l'épaisseur de HRlui - même change, tandis que lorsque vous définissez la bordure, elle reste toujours la même:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

L'attribut de hauteur a été déprécié en html 5. Ce que je ferais, c'est créer une bordure autour de l'heure et augmenter l'épaisseur de la bordure en tant que telle: hr style = "border: solid 2px black;"

J'ai ajouté de l'opacité à la ligne, elle semble donc plus mince:

<hr style="opacity: 0.25">

Je crois que la meilleure réalisation pour le style <hr>est la suivante:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

Et le code HTML il suffit d' ajouter: <hr>.

Voici une solution pour une ligne noire de 1 pixel sans bordure ni marge

hr {background-color:black; border:none; height:1px; margin:0px;}

• Testé dans Google Chrome

Je pensais que je voudrais ajouter ceci parce que les autres réponses ne comprenaient pas: margin:0px;.

• Démo

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Je suggère d'utiliser la construction comme

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>