CSS-box-model-visualizer

Hoe te gebruiken

1. Voer de waarden van het boxmodel in: definieer marge, rand, padding en inhoudsafmetingen in de velden of via interactieve schuifregelaars.
2. Verken de visualisatie: het klassieke diagram van geneste boxen wordt in realtime bijgewerkt — marge (oranje), rand (geel), padding (groen) en inhoud (blauw), allemaal duidelijk gelabeld.
3. Kopieer de CSS: klik op CSS kopiëren om de volledige boxmodel-eigenschappen van het geconfigureerde element te krijgen.

Waarom de CSS-boxmodel-visualizer gebruiken?

Het CSS-boxmodel is een van de meest fundamentele concepten van de webindeling — en een van de meest voorkomende bronnen van bugs, vooral bij het mengen van box-sizing-waarden, marge-fusie en randmaten. Deze interactieve visualizer maakt het boxmodel concreet en tastbaar: u past waarden aan en ziet onmiddellijk hoe marge, rand en padding zich rond de inhoud stapelen. Essentieel voor het leren, debuggen en onderwijzen van CSS.

Functies

• Interactief diagram: de klassieke weergave van het geneste boxmodel met kleurgecodeerde lagen (marge, rand, padding, inhoud).
• Box-sizing-schakelaar: schakel tussen content-box en border-box om te zien hoe elke modus de totale afmetingen beïnvloedt.
• Individuele zijden: definieer waarden boven/rechts/onder/links onafhankelijk voor marge, padding en rand.
• Totale grootte berekening: toont de berekende totale breedte en hoogte van het element.
• CSS-uitvoer: genereert kant-en-klare CSS voor het geconfigureerde boxmodel.

Veelgestelde vragen

Wat is het verschil tussen content-box en border-box?

Met content-box (standaard) gelden width en height alleen voor het inhoudsgebied — padding en rand worden toegevoegd aan de totale grootte van het element. Met border-box omvatten width en height padding en rand, waardoor de afmetingen voorspelbaarder worden. De meeste moderne CSS-resets passen box-sizing: border-box toe op alle elementen.

Wat is marge-fusie?

Wanneer twee verticale marges elkaar raken (tussen aangrenzende block-elementen of tussen ouder en eerste/laatste kind), versmelten ze tot een enkele marge gelijk aan de grootste van de twee waarden. Dit gebeurt niet met flex- of grid-kinderen, noch met elementen die padding of randen hebben.

Hoe verwijder ik de extra ruimte onder inline-elementen?

Inline-elementen (zoals <img>) hebben een kleine ruimte eronder veroorzaakt door de basislijnuitlijning van de line-height. Corrigeer dit door display: block op het element te zetten, of vertical-align: bottom, of font-size: 0 op de ouder.