CSS Vergleich: zwei Eigenschaften, die man verwechselt, nebeneinander

Alle Vergleiche

1. margin vs paddingBeide schaffen Abstand, aber auf verschiedenen Seiten des Rahmens: padding zwischen Inhalt und Rahmen, margin zwischen Rahmen und Nachbarn.Labor
2. border vs outlineBeide zeichnen eine Linie um ein Element.Labor
3. display: none vs visibility: hiddenBeide machen ein Element unsichtbar.Labor
4. position: relative vs position: absoluterelative verschiebt ein Element von seinem normalen Platz, ohne den Platz aufzugeben.Labor
5. em vs rem / pxpx ist absolut, em relativ zur Schriftgröße des Elements, rem relativ zur Schriftgröße des Wurzelelements.Labor
6. #id vs .classEine ID kommt pro Dokument einmal vor und dient als Sprungziel und Skript-Anker; eine Klasse beliebig oft und dient der Gestaltung.Labor
7. inherit vs initial / unsetinherit nimmt den Wert des Elternelements, initial den Ausgangswert der Spezifikation, unset je nachdem, was für die Eigenschaft normal ist.Labor
8. float vs clearfloat nimmt ein Element aus dem Fluss und lässt Text daran vorbeifließen; clear zwingt ein folgendes Element unter den Float.Labor
9. overflow: hidden vs overflow: auto / scrollWenn Inhalt nicht in seine Box passt, entscheidet overflow: sichtbar überstehen, abschneiden, Scrollleisten bei Bedarf oder immer.Labor
10. list-style vs list-style-type / -position / -imagelist-style fasst list-style-type, list-style-position und list-style-image zusammen.Labor
11. background vs background-color / -image / -position / -repeatbackground fasst fünf Eigenschaften aus CSS 2.1 zusammen – Farbe, Bild, Wiederholung, Anheftung, Position – und seit CSS 3 drei weitere.Labor
12. font vs font-size / font-family / font-weight / line-heightfont ist die strengste Kurzform in CSS: font-size und font-family sind Pflicht, die Reihenfolge ist festgelegt, line-height steht mit Schrägstrich hinter der Größe – und alles Ungenannte wird zurückgesetzt, auch font-variant und font-stretch..Labor
13. text-decoration vs border-bottomDie echte Unterstreichung kennt die Schrift: Sie liegt an der Grundlinie, überspringt Unterlängen und folgt dem Text.Labor
14. white-space: nowrap vs white-space: pre / pre-wrapwhite-space steuert zwei Dinge zugleich: ob Leerzeichen und Zeilenumbrüche aus dem Quelltext erhalten bleiben und ob der Browser lange Zeilen umbrechen darf.Labor
15. vertical-align vs line-heightBeide wirken in der Zeilenbox, aber auf verschiedene Fragen: line-height bestimmt, wie hoch eine Zeile ist und wo der Text darin sitzt; vertical-align, wo eine Inline-Box – ein Bild, ein hochgestelltes Zeichen, eine Tabellenzelle – relativ zur Grundlinie steht.Labor

Warum Vergleiche

Die Referenz erklärt jede Eigenschaft für sich. Die meisten Fehler entstehen aber zwischen zwei Eigenschaften, die dasselbe zu tun scheinen: ein Abstand, der auf der falschen Seite des Rahmens liegt; ein Element, das unsichtbar ist, aber Platz einnimmt; eine Einheit, die sich in verschachtelten Elementen aufsummiert. Der Vergleich stellt beide nebeneinander und benennt die Stelle, an der sie auseinandergehen.

Aufbau einer Gegenüberstellung

Jede Seite beginnt mit dem Labor, weil sich der Unterschied schneller sehen als lesen lässt: Ein Umschalter setzt einmal die eine, einmal die andere Deklaration, und die Probe darunter zeigt, was passiert. Erst danach folgt die Erklärung, und zwar in der Reihenfolge, in der die Unterschiede zählen – zuerst der grundsätzliche, dann die Folgen für Layout, Vererbung und Zugänglichkeit, zuletzt die Randfälle.

Am Ende steht eine kurze Entscheidungshilfe, meistens als Liste. Sie ist bewusst knapp gehalten: Wer die Seite von oben gelesen hat, braucht sie nicht, und wer sie beim zweiten Besuch nachschlägt, will nicht wieder alles lesen. Die Verweise in die Vollreferenz stehen an jeder Seite oben und in der Randspalte, weil die Gegenüberstellung erklärt, worin sich zwei Eigenschaften unterscheiden, und die Referenz, was jede einzelne genau tut.

Wenn beide richtig sind

Nicht jede Gegenüberstellung endet mit einem Sieger. Bei Kurzform und Einzeleigenschaft hängt die Antwort davon ab, ob eine vollständige Neudefinition gewollt ist oder eine gezielte Änderung; bei den Einheiten davon, was sich mitverändern soll, wenn die Schriftgröße wechselt. In diesen Fällen ist die Frage nicht, welche Eigenschaft besser ist, sondern welche Frage man eigentlich stellt.

Umgekehrt gibt es Paare, bei denen die Antwort eindeutig ist und trotzdem oft anders ausfällt: Eine Kontur um ein Formularfeld gehört nicht entfernt, eine Kennung gehört nicht als Gestaltungshaken vergeben, eine Zeilenhöhe gehört ohne Einheit notiert. Diese Fälle sind auf den betreffenden Seiten ausdrücklich als solche gekennzeichnet, damit sie sich nicht zwischen den abwägenden Absätzen verlieren.

Nützlicher als eine Empfehlung ist dann die Regel dahinter, und die steht jeweils im letzten Abschnitt. Wer sie einmal verstanden hat, entscheidet auch in den Fällen richtig, die hier nicht aufgeführt sind – und das sind die meisten.