CSS-Box-Modell: Margin, Padding, Border und Display
CSS-Box-Modell-Visualisierer
CSS-Box-Modell: Margin vs. Padding, Border, Display | We.Inc
Verschiebe Regler für Inhalt, Padding, Border und Margin und sieh zu, wie sich das Box-Modell neu zeichnet, mit box-sizing, Margin Collapsing, Rahmenstilen und allen display-Werten im Live-Vergleich.
Jedes Element wird als verschachtelte Rechtecke gezeichnet: der Inhalt, dann das Padding (Raum innerhalb des Rahmens, mit dem Hintergrund gefüllt), dann der Rahmen (Border), dann die Margin (transparenter Raum außen, der Nachbarn wegschiebt). Mit box-sizing: border-box schließt die gesetzte Breite Padding und Rahmen ein, wodurch Layouts viel vorhersehbarer werden. Die Eigenschaft display bestimmt, wie Boxen fließen.
Die vier Ebenen, von innen nach außen
Ebene
Was sie tut
Bekommt den Hintergrund?
Inhalt
Enthält Text, Bilder und Kindelemente
Ja
Padding
Luft zwischen Inhalt und Rahmen
Ja
Border
Eine sichtbare Linie (oder nichts) um das Padding
Eigene Rahmenfarbe
Margin
Abstand zwischen dieser Box und ihren Nachbarn
Nein, immer transparent
Bewege die vier Regler, und das Diagramm, die gemessene Gesamtgröße und das CSS ändern sich gemeinsam. Unter dem Visualisierer kannst du box-sizing umschalten, zusehen, wie zwei Margins zu einer zusammenfallen, und block, inline, inline-block, flex, grid und none nebeneinander an denselben drei Elementen vergleichen.
Lege Breite und Höhe für den Inhaltsbereich fest und füge dann mit den Reglern Padding, Rahmen und Margin hinzu.
Schalte box-sizing zwischen content-box und border-box um und achte darauf, wie sich die gerenderte Breite ändert.
Lies die Gesamtbreite und -höhe ab, die das Element wirklich einnimmt, Margins eingeschlossen.
Kopiere das erzeugte CSS und scrolle dann nach unten zu den Demos für Margin Collapsing und display.
Setze *, *::before, *::after { box-sizing: border-box; } an den Anfang jedes Stylesheets. Die meisten Resets und Frameworks tun das bereits.
Nutze Padding, wenn der Hintergrund oder eine Klickfläche wachsen soll, und Margin, wenn du nur Abstand zwischen getrennten Dingen willst.
Bevorzuge in einem Flex- oder Grid-Container gap statt Margins an den Kindelementen. Es verdoppelt sich nie an den Rändern.
Outline wird außerhalb des Rahmens gezeichnet und nimmt keinen Platz ein, deshalb nutzen Fokusringe es statt border.
Häufige Fragen
Was ist der Unterschied zwischen Margin und Padding?
Padding liegt innerhalb des Rahmens, wird also vom Hintergrund des Elements gefüllt und gehört zu seiner Klickfläche. Margin liegt außerhalb des Rahmens, ist immer transparent und trennt das Element nur von anderen. Vertikale Margins zwischen Blöcken können außerdem zusammenfallen, Padding dagegen nie.
Warum ist mein Element breiter als die gesetzte Breite?
Beim Standard box-sizing: content-box gilt width nur für den Inhalt, und Padding plus Rahmen kommen obendrauf. Eine 300px-Box mit 20px Padding und einem 2px-Rahmen wird 344px breit dargestellt. Stell auf box-sizing: border-box um, dann bleibt sie 300px breit, und der Inhalt schrumpft passend.
Wann fallen Margins zusammen?
Obere und untere Margins von Block-Boxen im normalen Fluss verschmelzen, wenn sie sich berühren: zwischen Geschwistern und zwischen einem Elternelement und seinem ersten oder letzten Kind, wenn kein Rahmen, kein Padding und kein Inline-Inhalt sie trennt. Die größere Margin gewinnt. In Flex- oder Grid-Containern und horizontal fallen Margins nie zusammen.
Was ist der Unterschied zwischen display: none und visibility: hidden?
display: none entfernt das Element vollständig aus dem Layout, der Platz schließt sich also, und Screenreader überspringen es. visibility: hidden hält den Platz frei, zeichnet aber nichts, und der Inhalt ist auch für assistive Technologien verborgen. opacity: 0 behält sowohl den Platz als auch die Möglichkeit, das Element anzuklicken oder zu fokussieren.
Kann ich bei einem Inline-Element eine Breite setzen?
Nein. Breite, Höhe und vertikale Margins werden bei einer einfachen Inline-Box wie einem span ignoriert. Vertikales Padding wird gezeichnet, schiebt aber die Zeilen nicht auseinander. Ändere es in inline-block oder mach das Elternelement zu einem Flex-Container, dann greifen diese Größen.
content-box und border-box in Zahlen
Bei content-box entspricht die Gesamtbreite der Breite plus linkem und rechtem Padding plus linkem und rechtem Rahmen. Die Margin kommt außen noch hinzu. Das war das ursprüngliche CSS-Verhalten, und es ist für die meisten Elemente immer noch der Browser-Standard.
Bei border-box wird die angegebene Breite bis zur Außenkante des Rahmens gemessen. Padding und Rahmen gehen vom Inhaltsbereich ab, statt die Box zu vergrößern, sodass ein zweispaltiges Layout aus 50% plus 50% in einer Zeile bleibt, egal wie viel Padding du hinzufügst.
Rahmen jenseits einer einfachen Linie
Die Kurzschreibweise border nimmt Breite, Stil und Farbe in beliebiger Reihenfolge. Die Stile sind solid, dashed, dotted, double, groove, ridge, inset, outset, none und hidden. Ein Rahmen mit dem Stil none hat die Breite null, egal welche Breite du angegeben hast, was alle überrascht, die nur border-width setzen.
border-radius rundet in aktuellen Browsern die Ecken von Rahmen, Hintergrund und Outline ab. Ein Wert rundet alle vier Ecken; ein Schrägstrich setzt getrennte horizontale und vertikale Radien für elliptische Ecken, und 50% machen aus einem Quadrat einen Kreis.
Wie display die Box verändert
Block-Boxen beginnen in einer neuen Zeile und dehnen sich auf die Breite ihres Containers aus. Inline-Boxen fließen innerhalb einer Textzeile und ignorieren Breite und Höhe. inline-block fließt wie Text, akzeptiert aber Größen und vertikale Margins, was es praktisch für Badges und Buttons macht.
flex und grid machen das Element nach außen zu einem Block und nach innen zu einem Layout-Container. Seine Kindelemente verhalten sich dann nicht mehr als Block oder Inline, sondern folgen den Flex- oder Grid-Regeln, mit gap für Abstände. contents entfernt die Box selbst und behält ihre Kindelemente, hatte aber immer wieder Fehler bei der Barrierefreiheit, also teste es mit einem Screenreader, bevor du dich darauf verlässt.
Margin oder Padding? Wähle nach Aufgabe
Was du nehmen solltest
Du willst
Nutze
Dass die Hintergrundfarbe den Raum abdeckt
Eine größere Tippfläche auf einem Button
Abstand zwischen zwei getrennten Karten
margin, oder gap am Elternelement
Ein Element ans andere Ende einer Flex-Zeile schieben
margin-left: auto
Einen Block mit fester Breite zentrieren
margin-inline: auto
Abstand, der nie mit einem Nachbarn zusammenfällt
padding, oder gap
Margin Collapsing live
Das erste Paar zeigt zwei Geschwister, deren Margins von 24px und 40px aufeinandertreffen: Der Abstand beträgt 40px, nicht 64px. Das zweite Paar liegt in einem flow-root-Container, der das Verschmelzen von Eltern- und Kind-Margins verhindert, und das dritte nutzt flex, wo nichts zusammenfällt.
Zusammenfallen bei Geschwistern und zwischen Eltern und Kind
Bearbeite die Margins und beobachte die Abstände. Auch padding-top: 1px an der äußeren Box verhindert das Verschmelzen von Eltern und Kind.
Rahmenstile und Radius
Alle acht sichtbaren Rahmenstile
groove, ridge, inset und outset schattieren den Rahmen, um Tiefe vorzutäuschen. Sie sehen ab 4px Breite am besten aus.
Radius-Formen: abgerundet, Pille, Kreis, Ellipse
Ein riesiger Radius wie 999px macht eine Pille beliebiger Länge. 50% auf einem Quadrat ergeben einen Kreis.
Alle display-Werte an denselben drei Elementen
display-Werte im Vergleich
Wert
Neue Zeile?
Breite und Höhe wirken?
Typische Verwendung
Tailwind
Ja
Ja
Abschnitte, Absätze, Karten
Nein
Nein
Wörter innerhalb eines Satzes
Nein
Ja
Badges, Buttons in einer Textzeile
Ja
Ja
Zeilen oder Spalten von Elementen
Nein
Ja
Ein Icon mit Beschriftung im Text
Ja
Ja
Zweidimensionale Layouts
Nein
Ja
Ein kleines Grid, das in einer Zeile steht
Ja
Ja
Umschließt Floats und Margins von Kindelementen
Box entfernt
Keine Box zum Bemessen
Kindelemente ins Layout des Elternelements aufnehmen
Aus dem Layout entfernt
Nicht gerendert
Vollständig ausblenden
block, inline, inline-block, flex und grid nebeneinander
Jede Zeile enthält dieselben drei spans mit width: 80px und Padding. Nur inline ignoriert die Breite.
display: none vs. visibility: hidden vs. opacity: 0
Drei Arten des Ausblendens im Vergleich
Eigenschaft
Behält seinen Platz?
Klickbar oder fokussierbar?
Von Screenreadern gelesen?
Mit Transition?
display: none
Nein
Nein
Nein
Nur mit allow-discrete in neueren Browsern
visibility: hidden
Ja
Nein
Nein
Ja, schaltet am Ende oder Anfang um
opacity: 0
Ja
Ja
Ja
Ja, fließend
Das mittlere Element auf drei Arten ausgeblendet
Achte auf die Lücke, die visibility und opacity hinterlassen, und auf die geschlossene Lücke bei display: none.
Der border-box-Reset
border-box überall anwenden
Die Pseudoelemente sind eingeschlossen, weil sie ebenfalls Boxen sind. Tailwinds Preflight enthält diese Regel bereits.
Tailwind-Entsprechungen
Box-Modell-Utilities in Tailwind (Standard-Abstandsskala, 1 Einheit = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Box-Modell-Visualisierer
Margin-Ebene
Gerenderte Box (Rahmenkante)
Belegter Platz, inklusive Margins
Gelb ist die Margin, die blaue Linie ist der Rahmen, Grün ist das Padding, Hellblau ist der Inhalt.