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)

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.

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