CSS Dimensies
In deze tutorial leer je hoe je de breedte en hoogte van een element instelt met behulp van CSS.Dit element heeft een hoogte van 50 pixels en een breedte van 100%.
CSS afmetingen
CSS heeft verschillende dimensie eigenschappen, zoals width, height, max-width, min-width, max-height en min-height waarmee je de breedte en hoogte van een element kunt bepalen. Op deze pagina wordt beschreven hoe je deze eigenschappen kunt gebruiken om de layout van je webpagina te verbeteren of een nieuwe te maken.
De breedte en hoogte
De width en height eigenschappen kunnen worden gebruikt om de breedte en hoogte van de inhoud van een element vast te leggen. Deze breedte en hoogte zijn exclusief opvullingen, randen of marges. Voor meer info zie het CSS boxmodel om te weten hoe de effectieve breedte en hoogte van de box van een element wordt berekend.
Voorbeeld:
CSS soorten waarden
De eigenschappen height en width kunnen de volgende waarden hebben:
| auto | - | Dit is de standaardwaarde, de browser berekent zelf de hoogte en breedte. |
| lenght | - | Geeft de hoogte en breedte in px, em, rem, pt, cm, etc. |
| % | - | Geeft de hoogte en breedte in procenten van het bevattende element. |
| initial | - | Stelt de breedte en hoogte in op de standaardwaarde, namelijk auto. |
| inherit | - | Geeft aan dat de breedte moet worden overgenomen van het bovenliggende element. |
 |
Negatieve waarden voor de eigenschappen width en height worden niet ondersteunt. Houd er ook rekening mee dat deze eigenschappen geen opvulling, randen of marges bevatten! |
Max-breedte instellen
De eigenschap max-width wordt gebruikt om de maximale breedte van een element in te stellen. De maximale breedte kan worden opgegeven door gebruik te maken van de volgende waarden: procenten (%), px, cm, enz. Standaard staat max-width op none. Dit betekent dat er geen maximale breedte is.Een element kan niet breder zijn dan de max-width: waarde, zelfs als de eigenschap width is ingesteld op iets groters. Bijvoorbeeld als de breedte is ingesteld op 300px en de maximale breedte is ingesteld op 220px, dan is de werkelijke breedte van het element 220px.
|
Als de eigenschap min-width is opgegeven met een waarde die groter is dan die van de eigenschap max-width, dan wordt in dat geval de waarde min-width toegepast. |
Max-hoogte instellen
Een element waarop max-height is toegepast zal nooit groter zijn dan de opgegeven waarde, zelfs als de eigenschap height is ingesteld op iets groters. Als de hoogte bijvoorbeeld is ingesteld op 200px en de maximale hoogte is ingesteld op 100px, dan is de werkelijke hoogte van het element 100px.
|
Als de eigenschap min-height is opgegeven met een waarde die groter is dan die van de eigenschap max-height, dan wordt in dat geval de waarde min-height toegepast. |
Min-breedte instellen
De eigenschap min-width kun je gebruiken om de minimale breedte van een element te bepalen. Een element kan niet kleiner zijn dan de min-width: waarde, zelfs als de waarde van width op iets lager is ingesteld. Als de breedte bijvoorbeeld is ingesteld op 250px en de minimale breedte is ingesteld op 150px, dan is de werkelijke breedte van het element 150px, dit betekent dat het niet kleiner dan de ingestelde waarde kan worden.
|
De eigenschap min-width wordt meestal gebruikt om ervoor te zorgen dat een element ten minste een minimale breedte heeft, zelfs als er geen inhoud aanwezig is. Het element mag echter normaal groeien als de inhoud de ingestelde minimumbreedte overschrijdt. |
Min-hoogte instellen
De eigenschap min-height kun je gebruiken om de minimale hoogte van een element te bepalen. Een element kan niet kleiner zijn dan de min-height: waarde, zelfs als de waarde van height op iets lager is ingesteld. Als de hoogte bijvoorbeeld is ingesteld op 50px en de minimale hoogte is ingesteld op 100px, dan is de werkelijke hoogte van het element 100px.
|
De eigenschap min-height wordt meestal gebruikt om ervoor te zorgen dat een element ten minste een minimale hoogte heeft, zelfs als er geen inhoud aanwezig is. Het element mag echter normaal groeien als de inhoud de ingestelde minimumhoogte overschrijdt. |
