Layout CSS : larghezza e larghezza massima
Utilizzo di larghezza, larghezza massima e margine: auto;
Come accennato nel capitolo precedente; un elemento a livello di blocco occupa sempre l'intera larghezza disponibile (si estende a sinistra ea destra il più possibile).
L'impostazione widthdi un elemento a livello di blocco impedirà che si allunghi fino ai bordi del suo contenitore. Quindi, puoi impostare i margini su auto, per centrare orizzontalmente l'elemento all'interno del suo contenitore. L'elemento occuperà la larghezza specificata e lo spazio rimanente verrà diviso equamente tra i due margini:
Nota: il problema con quanto <div>sopra si verifica quando la finestra del browser è più piccola della larghezza dell'elemento. Il browser aggiunge quindi una barra di scorrimento orizzontale alla pagina.
L'utilizzo max-widthinvece, in questa situazione, migliorerà la gestione da parte del browser delle finestre di piccole dimensioni. Questo è importante quando si rende un sito utilizzabile su piccoli dispositivi:
Suggerimento: ridimensiona la finestra del browser a meno di 500px di larghezza, per vedere la differenza tra i due div!
Ecco un esempio dei due div sopra:
Esempio
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}