Websites Bouwen 1 - Stylesheets

Borders, paddings & margins

We hebben nu gezien hoe we met behulp van css (Cascading Stylesheets) kleuren en lettergrootte kunnen bepalen. Nu gaan we kijken wat voor soort dingen we nog meer kunnen doen.

Border

We kunnen bijvoorbeeld een element een border geven. In onderstaand voorbeeld hebben we een div element een bruine rand van 6 pixels gegeven. We kunnen naast solid ook dotted of dashed als lijnsoort gebruiken. Probeer deze uit in onderstaand voorbeeld.



div {
    border-width: px;
    border-style: ;
    border-color: ;
    background-color: yellow;
}


<div>
  Banaan
</div>

We kunnen bovenstaande CSS ook in één regel neerzetten: border: 6px solid #a52a2a.

Met border geven we alle vier de randen tegelijk dezelfde stijl. Maar we kunnen ook de randen individueel een kleur geven:



div {
  border-top: px solid blue;
  border-bottom: px solid yellow;
  border-left: px solid red;
  border-right: px solid green;
}


<div>
 Vrolijke kleurtjes
</div>

Tip

Als je bezig bent met de layout van de pagina is het handig om elementen tijdelijk een border te geven. Dan zie je namelijk hoe groot ze zijn!

Padding

Nu staan de randjes heel dicht om de tekst heen. Om wat meer ruimte te maken tussen de inhoud van de div en het randje gebruiken we padding. Daarmee geven we aan hoeveel ruimte er tussen de inhoud van een element en de rand van een element moet komen.



div {
  border: 1px solid black;
  padding: px;
}


<div>
  Hier heb ik meer ruimte.
</h4>

Margin

Op dezelfde manier als padding de ruimte definieert tussen de inhoud en de rand kunnen we met margin de ruimte aangeven tussen de rand en de rest van de pagina.



div {
  border: 1px solid black;
  margin: px;
}


<div>
  Hier geef ik meer ruimte.
</div>

Width & height

Standaard zijn alle elementen groot genoeg om wat er in staat goed weer te geven. Maar we kunnen ook expliciet de hoogte en de breedte aangeven in een stylesheet. Dit doen we met de width en height. Dit is de grootte zonder de padding, border en margin. Dus alleen de grootte van de inhoud



div {
  border: 1px solid black;
  width: px;
  height: px;
}


<div>
  Ik ben een vaste grootte
</div>

De manier waarop margins, paddings and borders werken in CSS noemen we ook wel het 'CSS Box Model'. Net zoals we de border aan alle vier de kanten individueel kunnen veranderen. Kunnen we dat met margin en padding ook doen, bijvoorbeeld met margin-top of padding-left.

Alles tegelijk


  
div {
    margin: px;
    padding: px;

    border: px solid black;

    width: px;
    height: px;
}
    
    <div>Een div</div>

Wat gebeurt er als de padding, width en height op 0 staan?