Le proprietà height e width sono usate per impostare l'altezza e la larghezza di un elemento.

Le proprietà height e width non includono padding, bordi o margini.

CSS I valori di height e width

Le proprietà height e width possono avere i seguenti valori:

• auto - Questo è il default. Il browser calcola l'altezza e la larghezza
• length - Definisce height/width in px, cm ecc.
• % - Definisce height/width in percentuale del blocco contenitore
• initial - Imposta height/width al suo valore di default
• inherit - height/width saranno ereditati dai valori del suo elemento genitore

Esempio

Imposta l'altezza e la larghezza di un elemento <div>:

    div {
        height: 200px;
        width: 50%;
        background-color: powderblue;
    }
    

    div {
        height: 100px;
        width: 500px;
        background-color: powderblue;
    }
    

Impostare max-width

La proprietà max-width è usata per impostare la larghezza massima di un elemento.

La proprietà max-width può essere specificata in valori lenght, come px, cm, ecc. o in percentuale (%) del blocco contenitore o impostarlo a none (questo è il default. Significa che non c'è una larghezza massima).

Il problema con il <div> su visto, avviene quando la finestra del browser è più piccola della larghezza di un elemento (500px). Il browser allora aggiunge uno scrollbar orizzontale alla pagina.

Usando invece max-width, in questa situazione, migliorerà la gestione del browser delle finestre piccole.

Esempio

Questo elemento <div> ha una altezza di 100px e un max-width di 500px:

    div {
        max-width: 500px;
        height: 100px;
        background-color: powderblue;
    }
    

Tutte le proprietà delle dimensioni in CSS

Proprietà	Descrizione
height	Imposta l'altezza di un elemento
max-height	Imposta la massima altezza di un elemento
max-width	Imposta la massima larghezza di un elemento
min-height	Imposta la minima altezza di un elemento
min-width	Imposta la minima larghezza di un elemento
width	Imposta la larghezza di un elemento