Les 4: Boxmodel en borders

PreviousLes 3: Kleuren en achtergrondplaatje NextLes 5: Margin, padding en development tools

Last updated 5 years ago

Was this helpful?

Les 4: Boxmodel en borders

De elementen <p>, <h1>, <body>, <ul> zijn voorbeelden van block elementen. Er zijn ook inline elementen zoals <a>, <span> etc. Later leer je het verschil tussen inline en block elementen.

Je kunt deze blockelementen in je pagina zien als een doos (een box) met een inhoud erin.

Van buiten naar binnen zie het volgende:

margin (ruimte tussen de rand en het parent element)
border (de rand om het element)
padding (de ruimte tussen de inhoud en de rand)
de inhoud zelf

Bij blockelementen kun je de inhoud een hoogte en breedte geven. Voor één element is het boxmodel simpel genoeg. In een website heb je natuurlijk veel elementen die ook nog in elkaar zitten. Dus het kan behoorlijk complex worden! Ouder- en kindelementen (parent en child) horen bij elkaar. In de code hiernaast zie je:

<html> <- parent van <body> <head> <- child van <html> <body> <- parent van <ul>, child van <html> <ul> <- parent van <li>, child van <body> <li>

<html>
  <head>
  </head
  <body>
    <ul>
      <li>Dit is een hoofdstuk</li>
    </ul>
    <p>Dit is een stukje tekst.</p>
  </body>
</html>

We beginnen met de randen (borders).

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

Je kunt ook ronde borders maken Je geeft dan de radius (straal) van de ronding op. Je doet dit voor iedere hoek apart en de volgorde is: linksboven, rechtsboven, rechtsonder, linksonder Je kunt ook in een keer alle hoeken gelijk maken.

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}

Opdrachten

[1] Maak borders om een aantal elementen in je pagina.

[2] Experimenteer met verschillende borders! Met ronde hoeken, verschillende stijlen enzovoort.

PreviousLes 3: Kleuren en achtergrondplaatje NextLes 5: Margin, padding en development tools

Last updated 5 years ago

Was this helpful?

Je kunt deze blockelementen in je pagina zien als een doos (een box) met een inhoud erin.

Van buiten naar binnen zie het volgende:

margin (ruimte tussen de rand en het parent element)
border (de rand om het element)
padding (de ruimte tussen de inhoud en de rand)
de inhoud zelf

<html> <- parent van <body> <head> <- child van <html> <body> <- parent van <ul>, child van <html> <ul> <- parent van <li>, child van <body> <li>

<html>
  <head>
  </head
  <body>
    <ul>
      <li>Dit is een hoofdstuk</li>
    </ul>
    <p>Dit is een stukje tekst.</p>
  </body>
</html>

We beginnen met de randen (borders).

Een border heeft altijd 3 eigenschappen:

de dikte van de rand
de kleur van de rand
het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) - (none betekent geen rand)

h1, h2 {
  color: rgb(0, 51, 153);
  text-align: center; /* Centreer de inhoud*/
  /* rand: 4 pixels dik, volle rand, kleur oranje*/
  border: 4px solid orange;
}

h1, h2 {
  text-align: center;
  border: 4px solid orange;
  border-radius: 20px 0px 20px 0px;
}
 
p {
  border: 4px solid orange;
  border-radius: 20px;  /* alle hoeken straal van 20 pixels */
}

Opdrachten

[1] Maak borders om een aantal elementen in je pagina.

[2] Experimenteer met verschillende borders! Met ronde hoeken, verschillende stijlen enzovoort.

[3] Maak de opdracht in