CSS - blokgrootte beperken

Breedte beperken

Met eigenschap min-width stel je het kleinste formaat in waarop een blok op een smal browservenster kan worden weergegeven, en de eigenschap max-width geeft de maximale breedte die een blok kan aannemen wanneer het browservenster breed is.

Met deze eigenschappen zorg je ervoor dat de inhoud van pagina's leesbaar is, vooral op de kleinere schermen van mobiele apparaten. Je gebruikt de eigenschap max-width om ervoor te zorgen dat tekstregels in een groot browservenster niet te breed worden weergegeven en de eigenschap min-width om ervoor te zorgen dat ze niet te smal worden.

Hoogte beperken

Naast de breedte van een blok, kan je ook de hoogte van een blok beperken. Je kan dit doen met de eigenschapen min-height en max-height.

Als het blok niet groot genoeg is voor de inhoud, en de inhoud valt buiten het blok, ziet het er erg rommelig uit. Om te bepalen wat er moet gebeuren als er niet voldoende ruimte voor de inhoud van een blok is kan je de eigenschap overflow gebruiken.

h1 {
  min-height: 2em;
  min-width: 15em;
  max-height: 3em;
  max-width: 25em;
  color: white;
  background-color: olivedrab;
}