Introduction - width and height properties

Je hebt er misschien nog niet bij stilgestaan, maar alle elementen in een website hebben dimensies. Je hoeft ze natuurlijk niet te specificeren dankzij het vloeiende opmaakmodel wat als default wordt gebruikt. De elementen nemen de ruimte in die ze nodig hebben, en als er niet genoeg ruimte is worden ze automatisch in een richting geduwd met meer ruimte. Dit gebeurt allemaal doordat de width en height eigenschappen van een element als voorkeuze (default) op "auto" staan, wat betekent dat het element automatisch uitzet of inkrimpt afhankelijk van de inhoud ervan.

Let op het verschil tussen inline en block elementen bij het toekennen van dimensies, want ze gedragen zich verschillend: Een inline-element neemt van zichzelf de verticale en horizontale ruimte in die nodig is voor de inhoud. Een block-element echter gebruikt de hele beschikbare horizontale ruimte, maar verticaal alleen de ruimte die nodig is voor de inhoud. Daarom kunnen alleen block-elementen aangepaste breedtes en hoogtes hebben, zoals dit voorbeeld laat zien:

<style type="text/css">
.box-look {
	background-color: Silver;
	margin: 20px;
	padding: 10px;
}

#box1 {
	width: auto;
	height: auto;
}

#box2 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" class="box-look">
	Box 1<br>
	Some content....
</div>

<div id="box2" class="box-look">
	Box 2<br>
	Long text is automatically wrapped...
</div>

<span class="box-look">
	Inline content. Only uses the space it needs...
</span>

Als je dit voorbeeld uitprobeert zul je zien dat het eerste hok (box1) alle beschikbare horizontale ruimte inneemt terwijl het tweede hok maar 100 pixels in beide richtingen gebruikt. Div-elementen zijn standaard 'block level' elementen (hok-niveau). Merk op dat ik alleen voor box1 de hoogte en breedte heb opgegeven als auto om het verschil te laten zien - dit zijn al de standaardwaarden en mogen dus weggelaten worden.

Het laatste element is een span tag, wat standaard een inline-element is, en zoals je ziet gebruikt het alleen de benodigde ruimte. Je zou er een breedte en hoogte aan kunnen toekennen, maar de browser zou die negeren - alleen block-elementen kunnen aangepaste breedtes/hoogtes hebben.

Relatieve en absolute breedte / hoogte

We zagen al hoe we breedtes en hoogtes kunnen definiëren met een absolute waarde, in pixels, maar dat is maar één van de vele mogelijkheden. De breedte- en hoogte-eigenschappen kunnen zowel een [lengte] als een [percentage] waarde krijgen, wat betekent dat je zowel absolute waarden (zoals we bij pixels deden) als relatieve waarden, als percentage van de beschikbare ruimte of relatief bijv. ten opzichte van een lettergrootte (zoals de em eenheid, kunt gebruiken - hierover later meer.

In het volgende voorbeeld laat ik je zien hoe we procenten kunnen gebruiken om een procentueel, of relatief deel van de beschikbare ruimte in te nemen:

<style type="text/css">
#parent-box {
	width: 300px;
	height: 300px;
}

#box1 {
	width: 25%;
	height: 75%;
}

#box2 {
	width: 75%;
	height: 25%;
}
</style>

<div id="parent-box" style="background-color: CornflowerBlue;">

	<div id="box1" style="background-color: GreenYellow;">
		Box 1<br>
		Some content....
	</div>

	<div id="box2" style="background-color: Salmon;">
		Box 2<br>
		Long text is automatically wrapped, if needed...
	</div>

</div>

In dit voorbeeld hebben we een blok met een absolute grootte die als 'ouder'blok fungeert, en daarbinnen hebben we twee kleinere blokken die een relatieve hoeveelheid gebruiken van de beschikbare ouderruimte. Zo zie je hoe makkelijk dit gaat.

Samenvatting

In dit hoofdstuk zagen we hoe block-elementen op een webpagina automatisch hun afmetingen aanpassen en hoe we ze kunnen dwingen om een bepaalde afmeting aan te nemen door gebruik van de breedte- en hoogte-eigenschappen. Maar wat gebeurt er als we een breedte en een hoogte opgeven die niet genoeg ruimte biedt voor de inhoud? Daar gaan we in het volgende hoofdstuk nader op in.