Verweise

Ein-Pixel-Trennlinie

Das <hr>-Element in HTML eignet sich dazu, eine Trennlinie einzufügen, etwa um Textabschnitte besser voneinander abzugrenzen. Häufig sollen solche Trennlinien mit einer Höhe von genau einem Pixel formatiert werden.

Lösungsvorschlag

Zwar mag es auf den ersten Blick intuitiv erscheinen dem <hr>-Element einfach die CSS-Eigenschaft height:1px zuzuweisen. Dies entspricht jedoch nicht dem Muster des HTML-Box-Modells und führt daher nicht zum Erfolg.

Nachfolgend wird ein Lösungsvorschlag für eine Ein-Pixel-Trennlinie beschrieben. Zunächst ein Beispiel:


Diese Trennlinie wurde mit folgenden CSS-Eigenschaften formatiert:

margin:0;
padding:0;
height:0;
border-style:none;
border-top:1px solid #005fc0;

Hierbei werden alle Außen- und Innenränder entfernt. Lediglich der obere Rahmen der Linie erhält die gewünschte Dicke. Wenn statt solid hierbei dashed notiert würde, so erhielte man eine gestichelte Linie.

Fazit

Leider reagieren verschiedene Browser sehr unterschiedlich auf die CSS-Formatierung von Trennlinien. Der hier beschriebene Lösungsvorschlag sichert jedoch eine standardkonforme und in gängigen Browsern korrekt dargestellte Ein-Pixel-Trennlinie.

Verweise