CSS -lay-out - breedte en maximale breedte
Breedte, max-breedte en marge gebruiken: auto;
Zoals vermeld in het vorige hoofdstuk; een element op blokniveau neemt altijd de volledige beschikbare breedte in beslag (strekt zich links en rechts zo ver mogelijk uit).
Door een element op blokniveau widthin te stellen, wordt voorkomen dat het zich uitstrekt tot aan de randen van de container. Vervolgens kunt u de marges instellen op automatisch, om het element horizontaal in zijn container te centreren. Het element neemt de opgegeven breedte in beslag en de resterende ruimte wordt gelijk verdeeld tussen de twee marges:
Opmerking: Het probleem met het <div>bovenstaande doet zich voor wanneer het browservenster kleiner is dan de breedte van het element. De browser voegt vervolgens een horizontale schuifbalk toe aan de pagina.
In plaats daarvan zal het gebruik max-widthvan kleine vensters door de browser in deze situatie verbeteren. Dit is belangrijk bij het bruikbaar maken van een site op kleine apparaten:
Tip: verklein het browservenster tot minder dan 500px breed, om het verschil tussen de twee divs te zien!
Hier is een voorbeeld van de twee bovenstaande div's:
Voorbeeld
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}