CSS-Abstände (Box-Modell) auslesen und kopieren
Ein Tool für CSS-Abstände, das das Box-Modell eines Elements anzeigt – Padding und Margin an jeder Kante, Gap, Border-Radius und Display – und jeden Wert per Klick kopiert.
Aktualisiert am
Ag
- Ink
- Amber
- Paper
Ein Layout wirkt schief, und die Korrektur beginnt bei einem einzigen Element. Das Padding in einem Button ist zu knapp oder der Margin um eine Karte zu breit, und du willst die genaue Zahl, ohne dich durch die DevTools zu wühlen. Mit einem Inspektor für Abstände (Box-Modell) sparst du dir diese Suche. Du zeigst auf das Element, und der Bereich „Box“ zeigt das Box-Modell mit allen Seiten, Wert für Wert. SuperchargeInspect liest dieses eine Element für dich aus.
Was der Inspektor für Abstände (Box-Modell) anzeigt
Der Bereich „Box“ stellt das Box-Modell des Elements als Ebenen dar, von außen nach innen: Margin, dann Border, dann Padding, dann Content. Jede Seite des Elements hat ihren eigenen Wert, sodass oben, rechts, unten und links getrennt ausgelesen werden.
In der Mitte steht die Content-Box als Breite mal Höhe in CSS-Pixeln, also der Raum, in dem Text und Kindelemente des Elements liegen. Das Panel zeigt die Content-Größe in ganzen Zahlen an.
Neben dem Diagramm listet der Bereich drei weitere Werte einzeln auf: Gap, Radius und Display. Radius ist der Wert von border-radius. Jeder Wert wird einzeln angezeigt und beim Klick einzeln kopiert.
Das Box-Modell eines Elements lesen
Jede Zeile unten benennt einen Teil des Box-Modells und zeigt, was du anpassen solltest, wenn der Abstand nicht stimmt.
| Wert | Was er dir verrät |
|---|---|
margin | Der Abstand außerhalb des Borders, auf jeder Seite |
border | Die Linie um das Padding, mit ihrer Breite auf jeder Seite |
padding | Der Abstand zwischen Border und Content, auf jeder Seite |
| Content | Breite mal Höhe des Contents, in CSS-px |
gap | Der Abstand zwischen den Kindelementen des Elements |
| Radius | Die Eckenrundung, aus border-radius |
display | Der Layoutmodus, etwa block, flex oder grid |
Lies sie von außen nach innen, in derselben Reihenfolge, in der das Diagramm sie darstellt.
Abstandswerte kopieren
Jeder Wert im Bereich „Box“ ist ein Button. Klickst du auf das obere Padding, wird genau dieser eine Wert kopiert. Klickst du auf gap, wird nur der Gap kopiert. Du kopierst immer nur einen einzelnen Wert und fügst so nur das ein, was du gerade änderst.
Für den kompletten Satz öffnest du das Menü „Weitere Kopieroptionen“ und wählst „Nur Text kopieren“. Damit erhältst du die vollständige Liste der erfassten Styles, mit px-Werten für Padding und Margin in der Reihenfolge oben, rechts, unten, links, gefolgt von gap, border-radius und display.
Was nicht gemessen wird
Ausgelesen wird immer nur ein einziges Element. Es gibt kein Lineal, keine Hilfslinien, kein Grid- oder Flex-Overlay und keine Messung des Abstands zwischen zwei Elementen. Um zwei Elemente zu vergleichen, fixiere das erste, notiere dir Padding und Margin, wechsle dann mit den Pfeiltasten zum anderen und lies dessen Werte ab.
Tastatursteuerung und Datenschutz
Starte mit Alt+Shift+E und wechsle dann mit den Pfeiltasten zwischen Elementen. Drücke Ctrl+Up und Ctrl+Down, um zum Eltern- oder Kindelement zu springen, unter macOS Option+Up und Option+Down. Der Schritt zum Elternelement zeigt dir, welcher Wrapper den Abstand hinzufügt. Drücke Enter, um das Element zu fixieren, und Esc, um zur Auswahl zurückzukehren oder das Panel zu schließen.
Alles läuft lokal. Es gibt keine Netzwerkanfragen und kein Konto, sodass nichts, was du untersuchst, irgendwohin gesendet wird.
Mit dem CSS-Viewer liest du auch Schriften und Farben aus.
Häufig gestellte Fragen
Wie kann ich mir Padding und Margin eines Elements anzeigen lassen?
Was zeigt das Box-Modell-Diagramm an?
Werden die Werte in Pixeln angezeigt?
Kann das Tool den Abstand zwischen zwei Elementen messen?
Werden Seitendaten irgendwohin gesendet?
Ähnliche Funktionen
Zeig deinem KI-Coding-Tool genau das Element, das geändert werden soll
Zeig auf das Element, schreib eine Notiz dazu und kopiere eine Referenz mit annotiertem Screenshot und beobachteten Styles – dann füge sie in das KI-Coding-Tool ein, das du bereits nutzt.
CSS-Viewer für jedes Element: CSS-Werte ansehen und kopieren
Ein CSS-Viewer, mit dem du das CSS jedes Elements auf einer Website ansehen kannst. Lies Schrift, Farben, Abstände und Box-Modell ab und kopiere CSS-Werte in deine Zwischenablage.
Website-Farben untersuchen: den Hex-Code jedes Elements finden
Prüfe die Farben jeder Website direkt auf der Live-Seite. Zeig auf das Element, und im Bereich „Farben“ siehst du Text-, Hintergrund- und Rahmenfarben. Ein Klick kopiert den Hex-Code.