Summary  
This chapter covers the CSS box model’s spacing properties—padding, margin, and border—including their shorthand syntax and individual side settings.

General domain of usage  
Web page layout design

Je weet dat elk element inhoud, opvulling, rand en marge heeft. Laten we bekijken hoe je de afstand kunt regelen met deze eigenschappen.

## Padding
Padding creëert ruimte **binnenin** het element, tussen de inhoud en de rand.
```css
.box {
  padding: 20px;
}
```
Dit voegt 20px opvulling toe aan alle vier de zijden.

### Padding Shorthand
Padding kan worden geschreven met behulp van een verkorte notatie.

De volgorde van de waarden is altijd: boven → rechts → onder → links

```css
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Individuele Padding-eigenschappen

Elke zijde afzonderlijk instellen:
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## Margin
Margin creëert ruimte **buiten** het element, tussen het element en andere elementen.
```css
.box {
  margin: 20px;
}
```



### Margin Shorthand
Margin gebruikt dezelfde shorthand-regels als padding:

```css
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### Individuele marge-eigenschappen
Kunnen ook afzonderlijk worden ingesteld:
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## Rand
De rand bevindt zich **tussen** de opvulling en de marge.

Basisverkorte notatie:
```css
border: 4px solid brown;
```
Dit definieert: breedte, stijl, kleur.

Veelvoorkomende randstijlen zijn `solid`, `dotted`, `dashed` en `double`.

Het is ook mogelijk om afzonderlijke zijden aan te passen indien nodig:
```css
border-top: 2px solid black;
```

Bekijk het volgende voorbeeld en bepaal de mogelijke randstijlen:



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXItc2hvd2Nhc2UiPgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIGJveC1vbmUiPgogICAgICAgIDxoMz5Tb2xpZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPkEgY2xhc3NpYywgY2xlYW4gc29saWQgbGluZSB1c2VkIGluIG1vc3QgVUkgZWxlbWVudHMuPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm94LXR3byI+CiAgICAgICAgPGgzPkRvdHRlZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPlVzZWQgZm9yIG91dGxpbmVzLCBub3Rlcywgb3IgZGVjb3JhdGl2ZSBlbGVtZW50cy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtdGhyZWUiPgogICAgICAgIDxoMz5EYXNoZWQgQm9yZGVyPC9oMz4KICAgICAgICA8cD5PZnRlbiBzZWVuIGluIGVkaXRhYmxlIGZpZWxkcyBvciAiZHJhZyBoZXJlIiB6b25lcy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtZm91ciI+CiAgICAgICAgPGgzPkRvdWJsZSBCb3JkZXI8L2gzPgogICAgICAgIDxwPlN0eWxpc2ggYW5kIGJvbGQgLSB1c2VkIGZvciBlbXBoYXNpcyBvciBmcmFtaW5nLjwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouYm94LW9uZSB7CiAgYm9yZGVyOiAycHggc29saWQgYnJvd247Cn0KCi5ib3gtdHdvIHsKICBib3JkZXI6IDJweCBkb3R0ZWQgYnJvd247Cn0KCi5ib3gtdGhyZWUgewogIGJvcmRlcjogMnB4IGRhc2hlZCBicm93bjsKfQoKLmJveC1mb3VyIHsKICBib3JkZXI6IDRweCBkb3VibGUgYnJvd247Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwouYm9yZGVyLXNob3djYXNlIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDMwcHg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWF4LXdpZHRoOiA5MDBweDsKfQoKLmNhcmQgewogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpoMyB7CiAgbWFyZ2luLXRvcDogMDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7Cn0KCnAgewogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzU1NTsKICBsaW5lLWhlaWdodDogMS41Owp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .box-one {
        border: 2px solid brown;
      }

      .box-two {
        border: 2px dotted brown;
      }

      .box-three {
        border: 2px dashed brown;
      }

      .box-four {
        border: 4px double brown;
      }

      /* Additional styles for better appearance (not the current focus) */
      .border-showcase {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 600px;
margin: auto;
      }

      .card {
        width: 200px;
        padding: 20px;
        border-radius: 12px;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: transform 0.2s ease;
      }

      h3 {
        margin-top: 0;
        font-size: 18px;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div class="border-showcase">
      <div class="card box-one">
        <h3>Solide Rand</h3>
        <p>Een klassieke, strakke lijn die in de meeste UI-elementen wordt gebruikt.</p>
      </div>

      <div class="card box-two">
        <h3>Gestippelde Rand</h3>
        <p>Gebruikt voor omlijningen, notities of decoratieve elementen.</p>
      </div>

      <div class="card box-three">
        <h3>Gestreepte Rand</h3>
        <p>Vaak te zien bij bewerkbare velden of "sleep hier"-zones.</p>
      </div>

      <div class="card box-four">
        <h3>Dubbele Rand</h3>
        <p>Stijlvol en opvallend - gebruikt voor nadruk of omlijsting.</p>
      </div>
    </div>
  </body>
</html>


Padding:
- Voegt ruimte toe binnen het element;
- Vergroot het achtergrondgebied.

Margin:
- Voegt ruimte toe buiten het element;
- Heeft geen invloed op de achtergrond van het element.

Belangrijk verschil

Welke zijde krijgt `40px` in de volgende declaratie?

Welke eigenschap voegt ruimte toe binnen een element, tussen de inhoud en de rand?

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Marge en Opvulling Eenvoudig Uitgelegd

Padding

Padding Shorthand

Individuele Padding-eigenschappen

Margin

Margin Shorthand

Individuele marge-eigenschappen

Rand

Uitvoer

1. Welke zijde krijgt `40px` in de volgende declaratie?

2. Welke eigenschap voegt ruimte toe binnen een element, tussen de inhoud en de rand?