Boxmodel opdrachten

Afmetingen van block elementen

De afmetingen van block elemententen, zoals DIV’s, wordt bepaald door de margin, de border, de padding, de width en de height. Wat betekenen deze begrippen en wat zijn de verschillen?

  • margin: de ruimte aan de buitenkant, de afstand tussen het element en de elementen die er naast staan
  • border: de rand om het element
  • padding: de ruimte aan de binnenkant, bijvoorbeeld om ruimte tussen de rand en tekst te maken
  • width: de breedte die je kunt gebruiken voor de inhoud, bijvoorbeeld voor tekst of een afbeelding.
  • height: de hoogte die je kunt gebruiken voor de inhoud, bijvoorbeeld voor tekst of een afbeelding.

 

In CSS kun je deze eigenschappen een waarde geven, je kunt in het geval van de margin, border en padding ook verschillende waardes geven voor boven, rechts, onder en links.

Bovenstaande figuur geeft aan hoe de breedte en de hoogte van een block element, zoals een DIV, in je browser wordt bepaald. Dit wordt ook wel het boxmodel genoemd. Het is belangrijk om te weten hoe breed en hoog een element is bij het maken van een website. Zo kun je er bijvoorbeeld voor zorgen dat er precies genoeg ruimte is voor een extra kolom.

Kun je de onderstaande vragen beantwoorden? Als je dit goed begrijpt wordt het maken van indelingen in HTML een stuk eenvoudiger.

Opdracht 1

Een div element heeft de volgende CSS:

div.blokje {
    width: 190px;
    height: 40px;
    border-width: 2px;
    padding: 5px;
    margin: 10px;
}

Vraag 1.1: hoe breed is deze div?
Vraag 1.2: hoe hoog is deze div?

Opdracht 2

Een div element heeft de volgende CSS:

div.blokje {
    width: 200px;
    height: 460px;
    border-width: 1px;
    border-color: orange;
    padding-left: 10px;
    margin: 10px;
}

Vraag 2.1: hoe breed is deze div?
Vraag 2.2: hoe hoog is deze div?

Opdracht 3

Een div element heeft de volgende CSS:

div.blokje {
    width: 220px;
    height: 300px;
    padding-left: 5px;
    padding-top: 10px;
    margin-bottom: 10px;
    border: 2px solid #f00;
}

Vraag 3.1: hoe breed is deze div?
Vraag 3.2: hoe hoog is deze div?
Vraag 3.3: wat voor kleur heeft de border?

Opdracht 4

Een div element heeft de volgende CSS:

div.blokje {
    width: 200px;
    height: 400px;
    border-width: 2px;
    border-color: black;
    padding: 5px 0 5px 0;
    margin: 10px 5px 0 5px;
}

Vraag 4.1: hoe breed is deze div?
Vraag 4.2: hoe hoog is deze div?

Opdracht 5

Schrijf de CSS voor een div’je met de volgende eigenschappen: Een totale breedte en hoogte van 300px met een padding aan de boven en onderkant van 10px, en een margin links van 40px.

Opdracht 6

Schrijf de CSS voor een div’je met de volgende eigenschappen: Een totale breedte van 600px en een totale hoogte van 300px met een padding aan de linkerkant van 10px, en een margin boven van 10px en een rode border van 2px.

Comments are closed.