Handleiding HTML - Stijleigenschappen voor breedte en hoogte

CSS		eigenschappen	afmetingen

Handleiding HTML CSS eigenschappen | Inhoud CSS | Inhoud HTML | Begin

Tot de eigenschappen voor afmetingen behoren: width en height.

De width en height eigenschappen kunnen worden gebruikt om de breedte en hoogte van de inhoud van een element vast te leggen. Ze hebben vooral hun toepassing bij afbeeldingen.
Voor een algemene toelichting op de vormgeving van een element, zie de beschrijving van de box.

Bij de voorbeelden van de verschillende eigenschappen is een afbeelding opgenomen, waarop te zien is hoe de weergave zou moeten zijn. Klik op de afbeelding en bekijk in een nieuw venster of de browser het voorbeeld (correct) ondersteunt.

Dit onderdeel is niet actueel. De informatie over de ondersteuning door browsers heeft slechts betrekking op Microsoft Internet Explorer t/m versie 4 en Netscape Navigator 4. Aan een nieuwe versie wordt gewerkt.

width Met de width eigenschap kan de breedte van de inhoud van een element worden vastgelegd.

Mogelijke waarden zijn lengte, percentage en auto.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de breedte van het parent element. Een negatieve waarde is niet toegestaan.

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen.

De eigenschap wordt niet geërfd.

Wanneer van een replaced elementen zowel width als height de waarde auto hebben, worden voor deze eigenschappen de intrinsieke afmetingen van het element gebruikt. Als alleen de width eigenschap gebruikt wordt bij het IMG element, dan wordt de waarde voor de height eigenschap berekenend op basis van de breedte-hoogte verhouding van de afbeelding.

De width eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en werkt bij Netscape Navigator 4 niet bij replaced elementen (zoals IMG en INPUT).
Microsoft Internet Explorer 4 ondersteunt de width eigenschap alleen voor de elementen DIV en SPAN en voor replaced elementen. Een fout in Internet Explorer 4 is, dat de width eigenschap niet alleen betrekking heeft op de breedte van de inhoud van het element, maar op de som van de breedte van de inhoud, de padding en de border.
N.B. De informatie over de ondersteuning door browsers heeft slechts betrekking op Microsoft Internet Explorer t/m versie 4 en Netscape Navigator 4.

De opbouw is:

width: waarde

De width eigenschap zal in de praktijk vooral gebruikt worden bij replaced elementen (zoals het IMG element voor afbeeldingen). Het is echter ook mogelijk om de eigenschap te gebruiken om een blok tekst ingesloten door een element op blokniveau een bepaalde breedte te geven. In het voorbeeld is dat gedaan met het DIV element. Volgens de regels voor de horizontale afmetingen van de box krijgt in dit geval margin-right de waarde auto. Aan de achtergrondkleur is dat te zien: de margin is transparent en krijgt niet de via de background-color eigenschap gedefinieerde achtergrondkleur, maar die van het parent element.

<DIV STYLE="width: 50%; background-color: yellow">De breedte ... 50%.</DIV>

height Met de height eigenschap kan de hoogte van de inhoud van een element worden vastgelegd.

Mogelijke waarden zijn lengte en auto.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Een negatieve waarde is niet toegestaan.

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen.

De eigenschap wordt niet geërfd.

De hoogte van de box van een element is minimaal de hoogte, die nodig is om de inhoud van het element en eventuele child elementen in verticale richting te kunnen plaatsen. Wanneer van een replaced elementen zowel width als height de waarde auto hebben, worden voor deze eigenschappen de intrinsieke afmetingen van het element gebruikt. Als alleen de height eigenschap gebruikt wordt bij het IMG element, dan wordt de waarde voor de width eigenschap berekenend op basis van de breedte-hoogte verhouding van de afbeelding.

De height eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Microsoft Internet Explorer 4 ondersteunt de height eigenschap alleen voor de elementen DIV en SPAN en voor replaced elementen. Een fout in Internet Explorer 4 is, dat de height eigenschap niet alleen betrekking heeft op de hoogte van de inhoud van het element, maar op de som van de hoogte van de inhoud, de padding en de border.
Bij Netscape Navigator 4 kan de height eigenschap in ieder geval niet gebruikt worden om een afbeelding in een andere grootte weer te geven, maar ook bij andere elementen lijkt de eigenschap niet te werken.
N.B. De informatie over de ondersteuning door browsers heeft slechts betrekking op Microsoft Internet Explorer t/m versie 4 en Netscape Navigator 4.

De opbouw is:

height: waarde

De height eigenschap zal in de praktijk vrijwel uitsluitend gebruikt worden bij replaced elements, zoals bij het IMG element in het onderstaande voorbeeld.
`<IMG SRC="grijs.gif"> <IMG SRC="grijs.gif" STYLE="height: 10em">`
In het volgende voorbeeld zijn de height en width eigenschap gebruikt bij een ander replaced element: INPUT.
`<FORM> <INPUT TYPE="SUBMIT" VALUE="OK" STYLE="width: 10em; height: 5em"> </FORM>`

CSS eigenschappen | Inhoud CSS | Inhoud HTML | Begin