CSS Layout - width en max-width

Gebruik width, max-width en margin: auto;

Zoals in het vorige hoofdstuk beschreven, nemen blokkastelelementen altijd de volledige beschikbare breedte in (zoveel mogelijk naar links en rechts uitstrekken).

Stel de breedte in van een blokkastelelement width Dit zal voorkomen dat het zich uitstrekt tot de rand van zijn container. Vervolgens kunt u de marges instellen op auto om het element horizontaal in het midden van zijn container te centreren. Het element zal de opgegeven breedte innemen, en de overige ruimte zal gelijkmatig worden verdeeld tussen de marges:

De breedte van dit <div>-element is ingesteld op 500px, de marges zijn ingesteld op auto.

Let op:Wanneer het browservenster smaller is dan de breedte van het element, is deze <div> zal problemen veroorzaken. De browser zal een horizontale scrollbar toevoegen aan de pagina.

In dit geval, gebruik max-width Dit kan de manier waarop de browser met kleine vensters omgaat verbeteren. Dit is belangrijk om ervoor te zorgen dat de website toegankelijk is op kleine apparaten:

De maximale breedte van dit <div>-element is 500px, de marges zijn ingesteld op auto.

Tip:Pas de grootte van het browservenster aan op minder dan 500 pixels om het verschil tussen de twee div's te zien!

Dit is een voorbeeld van de twee bovenstaande div's:

Voorbeeld

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solide #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solide #73AD21;
}

Probeer het zelf