Box-Modell-Visualisierungswerkzeug

Jedes HTML-Element wird als rechteckige Box gerendert. Das CSS-Boxmodell beschreibt, wie die Schichten Content, Padding, Border und Margin des Elements zusammenwirken, um den Gesamtplatz zu bestimmen, den das Element auf der Seite einnimmt. Das Verständnis dieses Modells ist unerlässlich für die Steuerung von Layout und Abständen.

Passen Sie die numerischen Eingaben für jede Schicht an — Margin, Border, Padding und Content-Abmessungen. Klicken Sie auf einen Schichtabschnitt, um ihn im Diagramm hervorzuheben. Die visuelle Vorschau wird sofort aktualisiert, und der entsprechende CSS-Code wird unten generiert und kann kopiert werden.

Margin ist der transparente Bereich außerhalb des Borders, der das Element von Nachbarn trennt. Border ist die sichtbare Begrenzung um das Padding. Padding ist der Abstand zwischen dem Border und dem eigentlichen Content. Content ist der innerste Bereich, in dem Text und untergeordnete Elemente erscheinen.

Bei content-box (Standard) gelten die eingestellten width und height nur für den Content-Bereich — Padding und Border werden zusätzlich hinzugefügt. Bei border-box sind Padding und Border in width und height eingeschlossen, was Layoutberechnungen intuitiver macht. Die meisten modernen Projekte verwenden border-box global.

Nutzen Sie diesen Visualizer, um mit verschiedenen Werten zu experimentieren und zu sehen, wie jede Schicht zur Gesamtgröße des Elements beiträgt. Wenn ein Element mehr Platz als erwartet einnimmt, prüfen Sie, ob Padding- oder Border-Werte es über die gewünschte Breite hinausschieben. Der generierte CSS-Code kann direkt in Ihr Projekt eingefügt werden.