08a - CSS - boxing model

• ICT
• Middelbare school
• Praktijkonderwijs
• MBO
• Leerjaar 2

Het Box-model in CSS

Leerdoel

Aan het einde van de les kun je uitleggen wat het box-model is in CSS en hoe het werkt.

Wat weet je al over het box-model in CSS?

Inleiding

Het box-model is een belangrijk concept in CSS. Het bepaalt hoe elementen op een webpagina worden weergegeven en hoe ze zich tot elkaar verhouden.

Box-model onderdelen

Het box-model bestaat uit vier onderdelen: inhoud, padding, border en marging. Deze onderdelen vormen samen de 'box' van een element.

Inhoud

De inhoud van een element verwijst naar de daadwerkelijke tekst, afbeeldingen, video's of andere content die binnen het element wordt weergegeven.

Padding

Padding is de ruimte tussen de inhoud van een element en de rand ervan. Het wordt gebruikt om de afstand tussen de inhoud en de rand aan te passen.

Border

De border van een element is de lijn die rondom de inhoud en padding van het element wordt getekend. Het definieert de rand van de box.

Marging

De marging van een element is de ruimte rondom de buitenkant van de border. Het wordt gebruikt om de afstand tussen elementen te bepalen.

Slide 8: Samenvatting

Het box-model is een essentieel concept in CSS dat bepaalt hoe elementen op een webpagina worden weergegeven. Het bestaat uit inhoud, padding, border en marge.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.