Hulp is onderweg

Je website ziet er in je browser vaak niet meteen uit zoals je wilt. Het kan dan erg handig zijn om direct in je browser te kijken welke css regels er van toepassing zijn op stukken van je code en om naar de actuele waardes van het boxmodel te kijken.

Je vindt de "devtools" met:

• Een sneltoets (F12 of CTRL-SHIFT-i)

• Rechts klik op je pagina -> inspecteren. (Dit heeft als extra voordeel dat je precies het aangeklikte pagina-element te zien krijgt in de code. Handig om dingen te controleren of uit te proberen)

Development tools in Chrome.

In het vorige onderdeel van de cursus 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). Eigenlijk heeft elke browser een stukje "standaard css" die hij op elke pagina loslaat. Als webdesigner kun je deze stijlen overschrijven door je eigen. Deze gaan dan voor op de standaart stijlen. Om meer controle te hebben, is het vaak handig delen (of alles) van de standaard stijlen eerst "uit" te zetten.

Als je in je hele pagina zonder marge wilt beginnen, dan zet je de code hieronder bovenin je CSS bestand. Hiermee maak je een selector voor elk mogelijk html element en zet je van alles de margin op 0 pixels.

* { /* Met * selecteer je alle elementen in je pagina */
  margin: 0px; /* geef alles een marge van 0 om mee te beginnen */
}

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;
  
  /* los opschrijven had ook gekund:
  margin-top: 0px;
  margin-right: 30px;
  margin-bottom: 0px;
  margin-left: 20px;
  */
}

Je kunt margin ook in een percentage geven. Dit percentage is dan ten opzichte van het ouderelement (het element waar dit element in zit).

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

Waar margin de ruimte is tussen het huidige element en de omliggende elementen, is padding 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.

​