# Les 5: Margin, padding en development tools

Je website ziet er in je browser vaak niet meteen uit zoals je wilt. 

Met behulp van de browser development tools kun je het boxmodel zien en welke CSS wordt gebruikt door de browser.

Je vindt de tools met:

* Rechts klik op je pagina -> inpsecteren
* Een sneltoets (F12 of CTRL-SHIFT-i)

![](/files/-M3ols8d_FjmWfdgvdoT)

In de vorige les heb je in het boxmodel gezien dat buiten de border de **marge (margin)** zit. Je kunt hiermee dus ruimte **tussen** bijvoorbeeld twee **`<p>`**-elementen maken.

```
p { 
  color: rgb(0, 51, 153);
  background-color: #00FA32;
  margin: 10px; /* 10 pixels marge rondom een paragraaf */
} 
```

Veel elementen krijgen standaard een marge van de browser (en dit verschilt per browser).

Als je in je hele pagina zonder marge wilt beginnen, dan zet je de code hiernaast bovenin je CSS bestand.

```
* { /* Met * selecteer je alle elementen in je pagina */
  margin: 0px;
}
```

Margin hoeft niet aan elke kant hetzelfde te zijn.\
Je kunt **margin-top**, **margin-bottom**, **margin-left** of **margin-right** gebruiken om andere marges te krijgen. Of je geeft na **margin** vier waardes mee.

```
p {  
  /* volgorde is: boven, rechts, onder, links
  margin: 0px 30px 0px 20px;
  /* 0px margin-top, 30px margin-right, 0px bottom en 20px left */
}
```

Je kunt margin ook in een percentage geven.

Dit is dan ten opzichte van het ouderelement (het element waar dit element in zit).

```
p {  
  margin-left: 20%;
  margin-right: 40%;
}
```

**padding** is de ruimte tussen de inhoud en de border (denk aan het boxmodel van vorige les)

Verder werkt padding hetzelfde als margin.

Je kunt dus padding per kant instellen met **padding-top**, **padding-right** enzovoort.

Ook kun je weer met **px** of **%** werken en in één regel padding instellen.

![](/files/-M3onuFtuq_6VJ78FcoD)

### Opdrachten

\[1] Zet bovenaan je .css bestand de volgende stijlregel:

```
* {
  margin: 0px;
  padding: 0px;
}
```

\[2] Stel nu de marges voor alle elementen in je pagina in zoals je het zou willen hebben!

\[3] Stel nu ook padding in voor alle elementen in je pagina. Zorg dat het er mooi uit komt te zien!

\[4] maak de opdracht in `repl.it`&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://metis-montessori-lyceum.gitbook.io/informatica/modules/html-css/html-css-1/les-5-margin-padding-en-development-tools.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.