Websites met stijl

Naslag: width

Op dit naslagblad

De eigenschap width
Min-width en max-width
Opmerkingen

De eigenschap width

De eigenschap width bepaalt de breedte van een element.

Opmerkingen:

Standaard wordt met de breedte van een element bedoeld: de breedte van de inhoud van het element (exclusief padding, border, margin). Dit kan worden gewijzigd: zie bij naslag box-sizing

Voorbeelden

width: 200px;
width: 50%;

width: 50%; betekent 50% van de breedte van de parent.

Vorm

width: waarde;

Waarden

breedte	Meestal in px (pixels=beeldpunten)
%	Als percentage van de breedte van de parent.
auto	Zo breed mogelijk binnen de parent.(standaard)
initial	Standaard (auto)
inherit	Erft de waarde van de parent.

Standaard waarde, vererving

standaard	auto (zo breed mogelijk binnen de parent)
vererft	nee

Eenheden

De meest gebruikte eenheden zijn: beeldpunten (px) en %.
Voor meer mogelijkheden: zie bij eenheden

Min-width en max-width

Min-width is de minimale breedte.
Max-width is de maximale breedte

vorbeeld: img {
width: 50%;
min-width: 100px;
max-width: 300px;
} De breedte van de afbeelding is 50% van de breedte van de parent met een minimum van 100px en een maximum van 300px.

Opmerkingen

Er is een belangrijk verschil tussen width: auto; en width: 100%;:
- Bij width: auto; past de breedte van het element precies binnen de parent.
- Bij width: 100%; is de breedte 100% van de breedte van de parent.
Op het eerste gezicht lijken deze twee declaraties hetzelfde effect te hebben. Maar dat is niet het geval:
Neem bijvoorbeeld een element p met een padding van 10px; Het staat binnen een article met een breedte van 100px.
- Met width: auto; past het element p precies binnen article.
  (Ook zonder width-declaratie is dat zo: width: auto is de standaardwaarde voor p.)
- Met width: 100%; is de breedte van p even groot als die van article. Maar width is de breedte van de inhoud, daar komen nog de breedtes van de linker en rechter padding (elk 10px) bij. De totale breedte van p is dus 120px, met als resultaat dat p uitsteekt buiten article.
Zie ook de eigenschap height.
De opbouw van deze eigenschap is gelijk aan die van width met één uitzondering:
- width: auto; geeft een element dat de volle beschikbare breedte gebruikt (binnden de ruimte van de parent.
- height: auto; geeft een element waarbij de hoogte wordt bepaald door de inhoud (de hoeveelheid tekst/afbeeldingen).