CSS - blokgrootte

Beschrijving

Pixels werden tot de komst van responsive design het meest gebruikt, omdat je de grootte daarmee nauwkeurig kunt regelen.

Als je percentages gebruikt is de grootte van het blok relatief ten opzichte van de grootte van het ouder-element en dat gaat zo door tot het html element. Om met percentages te werken moet de width of height van alle bovenliggende elementen bepaald zijn.

Gebruik je ems, dan wordt de grootte van het blok gebaseerd op de grootte van de tekst die erin staat. Je ziet dat percentages en ems steeds vaker gebruikt worden voor een flexibel ontwerp voor verschillende apparaten, met verschillende schermformaten.

De grootte van een blok stel je in met de eigenschappen width voor de breedte en height voor de hoogte.

h1 {
  height: 3em;
  width: 15em;
  color: white;
  background-color: olivedrab;
}