CSS-Box-Modell-Visualisierer

So funktioniert es

1. Boxmodell-Werte eingeben: Stellen Sie Margin, Border, Padding und Inhaltsmaße über die Eingabefelder oder interaktiven Regler ein.
2. Visualisierung erkunden: Das klassische verschachtelte Box-Diagramm aktualisiert sich in Echtzeit — Margin (orange), Border (gelb), Padding (grün) und Inhalt (blau) sind alle klar beschriftet.
3. CSS kopieren: Klicken Sie auf CSS kopieren, um die vollständigen Boxmodell-Eigenschaften für das konfigurierte Element zu erhalten.

Warum den CSS-Boxmodell-Visualisierer nutzen?

Das CSS-Boxmodell ist eines der grundlegendsten Konzepte im Web-Layout — und eine der häufigsten Quellen von Layout-Bugs, vor allem beim Mischen von box-sizing-Werten, beim Margin-Collapsing und bei der Rahmen-Dimensionierung. Dieser interaktive Visualisierer macht das Boxmodell konkret und greifbar: Sie passen Werte an und sehen sofort, wie sich Margin, Border und Padding um den Inhaltsbereich stapeln. Unverzichtbar zum Lernen, Debuggen und Vermitteln von CSS.

Funktionen

• Interaktives Diagramm: die klassische Ansicht des verschachtelten Boxmodells mit farbcodierten Schichten (Margin, Border, Padding, Inhalt).
• box-sizing-Umschalter: Wechseln Sie zwischen content-box und border-box, um zu sehen, wie jeder Modus die Gesamtmaße beeinflusst.
• Einzelne Seiten: Werte für oben/rechts/unten/links unabhängig für Margin, Padding und Border festlegen.
• Gesamtmaß-Berechnung: zeigt die berechnete Gesamtbreite und -höhe des Elements.
• CSS-Ausgabe: erzeugt einsatzbereites CSS für das konfigurierte Boxmodell.

Häufige Fragen

Was ist der Unterschied zwischen content-box und border-box?

Bei content-box (Standard) gelten width und height nur für den Inhaltsbereich — Padding und Border erhöhen die Gesamtgröße des Elements. Bei border-box schließen width und height Padding und Border ein, was die Vorhersage der Elementgrößen erleichtert. Die meisten modernen CSS-Resets wenden box-sizing: border-box auf alle Elemente an.

Was ist Margin-Collapsing?

Wenn zwei vertikale Margins aneinanderstoßen (zwischen benachbarten Block-Elementen oder zwischen Eltern und erstem/letztem Kind), kollabieren sie zu einem einzigen Margin, der dem größeren der beiden Werte entspricht. Bei Flex- oder Grid-Kindern oder bei Elementen mit Padding oder Rahmen geschieht das nicht.

Wie entferne ich zusätzlichen Abstand unterhalb von Inline-Elementen?

Inline-Elemente (wie <img>) haben einen kleinen Abstand darunter, der durch die Grundlinien-Ausrichtung der line-height entsteht. Beheben Sie das, indem Sie display: block am Element setzen oder vertical-align: bottom oder font-size: 0 am Elternelement.