Box-model-visualisator

Elk HTML-element wordt weergegeven als een rechthoekige box. Het CSS-boxmodel beschrijft hoe de lagen content, padding, border en margin van het element samenwerken om de totale ruimte te bepalen die het element op de pagina inneemt. Het begrijpen van dit model is essentieel voor het beheren van lay-out en afstand.

Pas de numerieke invoer aan voor elke laag — margin, border, padding en contentafmetingen. Klik op een laagsectie om deze in het diagram te markeren. De visuele preview wordt direct bijgewerkt en de bijbehorende CSS-code wordt onderaan gegenereerd om te kopiëren.

Margin is de transparante ruimte buiten de border die het element van buren scheidt. Border is de zichtbare begrenzing rondom de padding. Padding is de ruimte tussen de border en de werkelijke content. Content is het binnenste gebied waar tekst en onderliggende elementen verschijnen.

Bij content-box (standaard) zijn de ingestelde width en height alleen van toepassing op het contentgebied — padding en border worden extra toegevoegd. Bij border-box zijn padding en border inbegrepen in width en height, wat lay-outberekeningen intuïtiever maakt. De meeste moderne projecten gebruiken border-box globaal.

Gebruik deze visualizer om met verschillende waarden te experimenteren en te zien hoe elke laag bijdraagt aan de totale elementgrootte. Als een element meer ruimte inneemt dan verwacht, controleer dan of padding- of borderwaarden het buiten de bedoelde breedte duwen. De gegenereerde CSS kan direct in je project geplakt worden.