Abstands-/Auffüll-Visualizer
Visualisieren Sie mithilfe eines farbcodierten CSS-Boxmodelldiagramms und einer Live-Vorschau, wie Abstand, Rand, Rahmen und Boxabmessungen interagieren. Passen Sie Werte in Echtzeit an und exportieren Sie Kurzschrift-CSS- oder Tailwind-Dienstprogrammklassen sofort – läuft vollständig in Ihrem Browser, ohne dass eine Anmeldung erforderlich ist.
Adjust padding, margin, border, and box dimensions using the controls below. The diagram and live preview update instantly - then copy the generated CSS or Tailwind classes.
Applied to all spacing values
Box Dimensions
Padding
Margin
Box Model Diagram
Live Preview
Warum sollten Sie unseren Abstands-/Padding-Visualizer verwenden?
- Sofortige Live-Vorschau: Unser Abstands-/Padding-Visualizer aktualisiert das Boxmodelldiagramm und die Live-Vorschau in Echtzeit, während Sie Werte anpassen – es sind keine Tastenklicks erforderlich. Sehen Sie sich genau an, wie Abstand, Rand und Rahmen interagieren, bevor Sie eine einzige CSS-Zeile schreiben.
- Sicher und privat – kein Upload: Der Abstands-/Padding-Visualizer läuft vollständig in Ihrem Browser und verwendet clientseitiges JavaScript. Es werden niemals Daten an einen Server gesendet – Ihre Layout-Experimente und das generierte CSS bleiben auf Ihrem Gerät völlig privat.
- CSS- und Tailwind-Ausgabe: Generieren Sie sofort sowohl einfache CSS- als auch Tailwind-CSS-Dienstprogrammklassen aus Ihren Abstandswerten. Der Abstands-/Padding-Visualizer erzeugt nach Möglichkeit Kurzschrift-CSS und ordnet Werte der nächstgelegenen Tailwind-Skala zu – bereit zum Einfügen in Ihr Projekt.
- 100 % kostenlos – keine Grenzen: Nutzen Sie den Abstands-/Padding-Visualizer völlig kostenlos, ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Passen Sie Werte an, kopieren Sie CSS und experimentieren Sie so oft wie nötig mit Box-Modell-Layouts – für immer kostenlos, ohne Werbung.
Was ist das CSS-Box-Modell?
Das CSS-Box-Modell ist das grundlegende Layoutkonzept, das beschreibt, wie jedes HTML-Element als rechteckige Box mit vier unterschiedlichen Ebenen gerendert wird: Inhalt, Innenabstand, Rahmen und Rand. Für eine präzise CSS-Layoutarbeit ist es wichtig zu verstehen, wie diese Ebenen interagieren. Unser Abstands-/Padding-Visualizer rendert ein farbcodiertes Diagramm aller vier Ebenen gleichzeitig, sodass Sie leicht genau sehen können, wie sich Ihre Werte auf die gesamte gerenderte Größe und den Abstand jedes Elements auswirken. Ganz gleich, ob Sie Layoutprobleme beheben oder ein Designsystem erstellen, der Abstands-/Padding-Visualizer online gibt Ihnen sofortiges visuelles Feedback, ohne Code schreiben zu müssen.
So funktioniert unser Abstands-/Padding-Visualizer
- Legen Sie Ihre Werte fest: Geben Sie mithilfe der Steuerelemente Werte für Abstand, Rand, Rand und Rahmengröße ein. Wählen Sie Ihre bevorzugte Einheit (px, rem, em oder %) und das Diagramm wird sofort aktualisiert.
- Lesen Sie das Diagramm und die Vorschau: Das farbcodierte Boxmodelldiagramm zeigt alle vier Ebenen mit beschrifteten Werten. Die Live-Vorschau rendert die tatsächliche Box mit Ihrem genauen angewendeten CSS, sodass Sie das tatsächliche visuelle Ergebnis sehen können.
- Kopieren Sie Ihr CSS oder Tailwind: Das Tool generiert automatisch Kurzschrift-CSS- und Tailwind-Dienstprogrammklassen aus Ihren Werten. Kopieren Sie jede Ausgabe direkt in Ihr Projekt – keine manuelle Konvertierung erforderlich.
Was der Visualizer anzeigt
- Rand (orange): Die äußerste Ebene – Raum zwischen diesem Element und seinen Nachbarn. Der Rand ist transparent und hat keinen Einfluss auf die Hintergrundfarbe des Elements.
- Rand (rot-orange): Der sichtbare Rand des Elements. Rahmenbreite, Stil (durchgezogen, gestrichelt, gepunktet) und Rahmenradius sind alle konfigurierbar.
- Polsterung (grün): Abstand zwischen Rand und Inhalt. Padding übernimmt die Hintergrundfarbe des Elements und vergrößert den anklickbaren Bereich.
- Inhalt (blau): Der innerste Bereich, in dem Text und untergeordnete Elemente gerendert werden. Breite und Höhe steuern die Abmessungen des Inhaltsfelds.
Datenschutz und Datensicherheit
Der Abstands-/Padding-Visualizer verarbeitet alle Berechnungen und Renderings lokal in Ihrem Webbrowser mithilfe von JavaScript. Es werden keine Abstandswerte, CSS-Ausgaben oder Sitzungsdaten an einen externen Server übertragen. Dies macht das Tool völlig privat und sicher für die Verwendung in jedem Entwicklungs- oder Design-Workflow.
Häufig gestellte Fragen
Ein Abstands-/Padding-Visualizer ist ein Tool, mit dem Sie CSS-Abstände, Ränder, Rahmen und Boxabmessungen anpassen und das Ergebnis in einer Live-Vorschau und einem farbcodierten Boxmodelldiagramm sehen können. Unser browserbasierter Abstands-/Padding-Visualizer generiert auch Kurzschrift-CSS- und Tailwind-Dienstprogrammklassen – keine Anmeldung erforderlich.
Padding ist der Abstand zwischen dem Inhalt eines Elements und seinem Rand – er übernimmt die Hintergrundfarbe. Der Rand ist der Raum außerhalb der Grenze zwischen dem Element und seinen Nachbarn – er ist immer transparent. Der Abstands-/Auffüll-Visualizer zeigt beide in unterschiedlichen Farben an.
Das Tool unterstützt px, rem, em und %. Wählen Sie Ihre bevorzugte Einheit aus der Dropdown-Liste „Einheit“ aus und alle Abstandswerte verwenden diese Einheit in der generierten CSS-Ausgabe.
Der Abstands-/Padding-Visualizer ordnet px-Werte der nächstgelegenen Tailwind-CSS-Abstandsskala zu. Nicht standardmäßige Werte werden als beliebige Werte mithilfe der Klammersyntax ausgegeben (z. B. p-[18px]). Die Tailwind-Ausgabe funktioniert am besten mit px-Einheiten.
Ja. Das Tool generiert nach Möglichkeit automatisch Kurzschrift-CSS – Polsterung: 16 Pixel, wenn alle Seiten gleich sind, Polsterung: 16 Pixel und 24 Pixel, wenn oben/unten und links/rechts übereinstimmen, und einzelne Werte nur, wenn alle vier Seiten unterschiedlich sind.
Ja. Jede Seite verfügt über ein eigenes Eingabefeld. Verwenden Sie „Oben auf alle anwenden“, um alle vier Seiten auf den gleichen Wert zu setzen, oder „Alle löschen“, um alle Seiten auf Null zurückzusetzen.
Ja. Alle Berechnungen laufen vollständig in Ihrem Browser. Es werden niemals Abstandswerte, CSS-Ausgaben oder Sitzungsdaten an einen Server übertragen.
Ja. Das Tool unterstützt durchgezogene, gestrichelte, gepunktete und keine Rahmenstile, konfigurierbare Rahmenbreite und Rahmenradius in Pixel – alles spiegelt sich in der Live-Vorschau und im generierten CSS wider.
Ja. Der Abstands-/Padding-Visualizer ist 100 % kostenlos, ohne dass eine Anmeldung, ein Abonnement oder eine Zahlung erforderlich ist. Es gibt keine Premium-Funktionen oder gesperrte Optionen – alles ist für immer kostenlos.