In CSS Box Model is het een belangrijk concept om te bepalen hoe een element is gestructureerd en gepositioneerd op een webpagina. Het bestaat uit fundamentele componenten zoals Content, Padding, Border en Margin.
Content
Content is het gebied dat de daadwerkelijke inhoud van het element bevat, zoals tekst, afbeeldingen of video's.
Om de grootte van de inhoud te definiëren, gebruiken we de eigenschappen width en height.
Padding
Padding is de ruimte rond de inhoud, waardoor er een opening ontstaat tussen de inhoud en die van het element border.
Om padding waarden op te geven, gebruiken we de eigenschappen padding-top, padding-right,padding-bottom en . padding-left
Border
Het Border is de omtrek rond het element, waardoor een duidelijke grens ontstaat tussen de inhoud en de omgeving.
Om de border, op te maken, gebruiken we de border-width, border-style, en border-color eigenschappen.
Margin
Margin is de ruimte buiten het element border, waardoor er een opening ontstaat tussen andere elementen.
Om margin waarden te definiëren, gebruiken we de margin-top, margin-right, en eigenschappen. margin-bottom margin-left
Door de Box Model in CSS te gebruiken, kunnen we de grootte en positie van een element aanpassen door de waarden van de componenten aan te passen.
Voorbeeld:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
In het bovenstaande voorbeeld heeft het element met de klasse .box een breedte van 200px en een hoogte van 100px. Het heeft een 20px padding, een zwarte border met een dikte van 1px en een 10px margin.
Door deze waarden aan te passen, kunt u elementen met verschillende afmetingen en tussenruimten op uw webpagina maken. Door het gebruik van de Box Model, heb je controle over de positionering, grootte en spatiëring van elementen binnen je interface.