Hoogte - CSS-trucs | CSS Almanac 2025

De heighteigenschap in CSS definieert de inhoudhoogte van vakken en accepteert alle lengtewaarden.

Het "inhoud" -gebied wordt gedefinieerd als de opvulling en de rand naast de hoogte / breedte of grootte die de inhoud zelf inneemt.

Negatieve waarden zoals height: -100pxworden niet geaccepteerd. De heighteigenschap is niet van toepassing op niet-vervangen inline-elementen, inclusief tabelkolommen en kolomgroepen.

.wrap ( height: auto; /* auto keyword */ height: 120px; /* length values */ height: 10em; height: 0; /* unit-less length is OK for zero */ height: 75%; /* percentage value */ height: inherit; /* inherited value from parent element */ )

Kijk eens naar deze pen!

Als de hoogte van het bevattende blok niet expliciet is gespecificeerd, en het element is niet absoluut gepositioneerd, wordt de waarde van de hoogte berekend naar auto (het zal zo groot zijn als de inhoud erin, of nul als er geen inhoud is). Als het inhoudsgedeelte van de elementen meer verticale ruimte nodig heeft dan beschikbaar is op basis van de toegewezen waarde, wordt het gedrag van de elementen bepaald door de overfloweigenschap.

Bij gebruik van de zoekwoorden auto, heightwordt berekend op basis van de elementen content gebied tenzij uitdrukkelijk aangegeven. Dit betekent dat een waarde gebaseerd op een percentage nog steeds die van het inhoudsgebied van de elementen is. Evenzo, als de hoogte van de container is ingesteld op een procentuele waarde, is de procentuele hoogte van een onderliggend element nog steeds gebaseerd op het inhoudsgebied van dat onderliggende element.

Hoogte kan ook worden gebruikt als een eigenschap die kan worden geanimeerd.