CSS

Boxmodel

Met het boxmodel kun je zien hoe je elementen ten opzichte van elkaar kunt positioneren. In principe kun je een html-element zien als een soort box. Een box heeft dan weer inhoud. Bijvoorbeeld de h1-tag. De h1-tag is een box. De tekst in de tag is de inhoud.

<h1>Dit is de tekst in de h1-box!</h1>

De afstand tussen de rand van de box en de inhoud noem je 'padding'. Met css kun je deze instellen. Om een en ander zichtbaar te maken geven we de h1 box een gele achtergrondkleur en een zwarte rand. De css-code komt er dan zo uit te zien:

h1 {
    border: 1px solid black; /* Je kunt meerdere waarden in een keer toekennen aan een border (rand) */
    background-color:yellow;
    padding: 20px; /* De afstand tussen rand en inhoud */
}

Voor een paragraph (<p>) kunnen we hetzelfde doen. We maken de achtergrond lichtblauw.

p  {
    border: 1px solid black;
    background-color:lightblue;
    padding: 20px;
}

Je ziet dat de paragraph precies onder de box van de h1 terecht komt. Als je tussen twee elementen meer ruimte wilt maken, dan gebruik je de eigenschap 'margin'.

p  {
    border: 1px solid black;
    background-color:lightblue;
    padding: 20px;
    margin-top: 20px; /* alleen extra margin aan de bovenkant van <p> */
}

De afstand tussen de h1 en de paragraph is nu 20 pixels.
Zo ziet het boxmodel er uit:

Afstand tussen elementen regel je met margin (margin is alle zijden, met margin-top, margin-bottom, margin-right en margin-left kun je de afstand vanaf een bepaalde zijde instellen).
Afstand tussen de inhoud en de rand van een element stel je in met padding. (padding, padding-top, padding-bottom, padding-right en padding-left) De border is de rand om een element. De border stel je in met 3 waarden. De stijl van de border, de dikte en de kleur. Bijv. border: 1px solid black; Afzonderlijke borders stel je in met border-bottom, border-top, border-right en border-left.

Bij de Wilkens website hebben we te maken met de navigatie...

      <nav>
        <a href="#nieuws">Nieuws</a>
        <a href="#over-ons">Over ons</a>
        <a href="#producten">Producten</a>
        <a href="#contact">Contact</a>
      </nav>

We kunnen met de padding van het <nav>-element zorgen dat de links wat afstand van de rand hebben Door de margin aan te passen komt er meer ruimte tussen de verschillende links

nav {
    background-color:lightgrey;
    padding: 10px;
}

a {
    margin-right:20px;
}