CSS asettelu - width ja max-width

Käytä width-, max-width- ja margin: auto-ominaisuuksia;

Kuten edellisessä luvussa kuvattiin, blokkiasteen elementit käyttävät aina kaiken käytettävissä olevan leveyden (tavoitteena on levitä mahdollisimman vasemmalle ja oikealle).

Aseta blokkiasteen elementin width Tämä estää sen ulottumisen säiliönsä reunoille. Sitten voit asettaa marginin automaattiseksi keskustellaksesi elementtiä säiliössäsi horisontaalisesti. Elementti käyttää määritettyä leveyttä, ja jäljellä oleva tila jaetaan tasaisesti kahden marginin välillä:

Tämä <div>-elementin leveys on 500px ja margin asetettu automaattisesti.

Huomioitavaa:Kun selainikkuna on pienempi kuin elementin leveys <div> tämä voi aiheuttaa ongelmia. Selain lisää horisontaalisen vierityspalkin sivulle.

Tässä tapauksessa käytetään max-width Tämä voi parantaa selaimen käsittelemistä pienissä ikkunoissa. Tämä on tärkeää, jotta verkkosivusto on käyttökelpoinen pienillä laitteilla:

Tämä <div>-elementin enimmäisleveys on 500px ja ulkoreuna asetettu autoon.

Vinkki:Aseta selaimen ikkuna pienemmäksi kuin 500 pikseliä, jotta voit nähdä kahden div:n välisen eron!

Tämä on yllä olevien kahden div:n esimerkki:

Esimerkki

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

Kokeile itse