Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS box model

Iedere tag in HTML is een box. Een box heeft vier zijkanten, namelijk een rechterkant, een onderkant, een linkerkant en een bovenkant. In CSS spreek je over het CSS box model. Dit is essentieel als je de site wilt leren opmaken met CSS en bewerken met behulp van JQuery. Hoe is het css box model opgebouwd?

CSS box model

Bij een box model werk je altijd van buiten naar binnen. Stel je voor dat je een bak hebt waarin je speelgoed hebt van een kind. De lucht om de bak heen is de margin. Het materiaal van de bak zelf is de border. De ruimte tussen de deksel, de wanden en de bodem tot de inhoud is de padding. De inhoud is de content.

Dus de volgorde die je moet gaan onthouden is:

  1. margin
  2. border
  3. padding
  4. content

Instellen van een box model

Stel je hebt een <div> gemaakt met de volgende eigenschappen:

  1. width: 200px;
  2. padding: 5px;
  3. border: 1px;
  4. margin: 10px;

Hoeveel ruimte neemt deze div in de breedte in? Neem de volgorde weer in gedachte en vervolgens kun je de rekensom maken. De rekensom gaat dan als volgt:

10px margin + 1px border + 5px padding +
200px content + 5px padding + 1px border +
10px margin =
232px is de totale breedte van dit element.

De rekensom voor de hoogte is hetzelfde. Alleen ga je dan van boven naar beneden tellen.