Het Boxmodel op een Praktische Manier Begrijpen
Veeg om het menu te tonen
HTML-elementen worden weergegeven als rechthoekige vakken op een webpagina. Elk element heeft een inhoudsgebied, opvulling, rand en marge.
De vier onderdelen van het boxmodel
Inhoud
Het inhoudsgebied bevat tekst, afbeeldingen of andere elementen. Dit is het zichtbare binnenste deel van het element.
Opvulling
Opvulling is de ruimte tussen de inhoud en de rand. Het creëert interne afstand.
.box {
padding: 20px;
}
Opvulling vergroot de zichtbare grootte van het element.
Rand
De rand omringt de opvulling en de inhoud.
.box {
border: 4px solid darkblue;
}
Standaard is de randdikte 0 en komt de randkleur overeen met de tekstkleur als deze niet is opgegeven.
Marge
Marge is de ruimte buiten de rand. Het creëert afstand tussen elementen.
.box {
margin: 40px;
}
Marge heeft geen invloed op de achtergrondkleur van het element.
index.html
styles.css
In dit voorbeeld:
- De achtergrond vult het inhouds- en opvulgebied;
- De rand omringt deze;
- De marge creëert ruimte buiten de box.
Standaard hebben sommige elementen vooraf ingestelde padding- en margin-eigenschappen. Dit is gedaan om ervoor te zorgen dat een webpagina leesbaar blijft, zelfs zonder enige stijlen.
Het boxmodel bepaalt hoeveel ruimte een element op een pagina inneemt.
De totale grootte van een element is afhankelijk van de inhoudsgrootte, opvulling (padding), rand (border) en marge (margin).
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
