08b - CSS - margin en padding

• ICT
• MBO
• Studiejaar 1,2

CSS Box Model: Margin en Padding

Leerdoel

Aan het einde van de les kun je de termen MARGIN en PADDING in CSS uitleggen en toepassen in een HTML-pagina.

Wat weet je al over de termen margin en padding in CSS?

Wat is de box model?

In CSS wordt elk element als een rechthoekige box behandeld. Het box model bestaat uit content, padding, border en margin.

Margin

Margin is de ruimte aan de buitenkant van een element. Het bepaalt de afstand tussen het element en andere elementen.

div {

    margin: 40px;

    border: 1px solid #4CAF50;

}

Padding

Padding is de ruimte tussen de content en de border van een element. Het bepaalt de afstand tussen de inhoud van het element en de rand ervan.

div {

    padding: 40px;

    border: 3px solid #4CAF50;

}

Oefening Padding

Voeg een padding van 10px toe aan alle zijden aan alle tekstblokken.

Voeg een padding van 20px boven en onder, en 5px links en rechts toe aan tekstblok 2.

Voeg een padding van 5px boven en onder, en 20px links en rechts toe aan tekstblok 3.

Oefening Margin

Voeg een margin van 20px aan alle zijden toe aan alle tekstblokken.

Voeg een margin van 30px boven en onder, en 10px links en rechts toe aan tekstblok 2.

Voeg een margin van 10px boven en onder, en 30px links en rechts toe aan tekstblok 3.

Samenvatting

Margin bepaalt de afstand tussen elementen, terwijl padding de afstand tussen de inhoud en de rand van een element bepaalt.

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.