Proprietà CSS Dimension
Le proprietà delle quote CSS consentono di controllare l'altezza e la larghezza di un elemento.
Questo elemento ha una larghezza di 100%.
Impostazione altezza e larghezza
Le height e width sono utilizzati per impostare l'altezza e la larghezza di un elemento.
L' height e width possono essere impostati su auto (questo è predefinita. Significa che il browser calcola l'altezza e larghezza), o essere specificata in valori di lunghezza, come px, cm , ecc, o in percentuale (%) del blocco contenitore .
Nota: L' height e width proprietà non comprendono padding, bordi o margini; si misero l'altezza / larghezza dell'area all'interno dell'imbottitura, confine, e il margine dell'elemento!
L'esempio seguente mostra un <div> elemento con un'altezza di 100 pixel e una larghezza di 500 pixel:
Impostazione max-width
Il max-width proprietà viene utilizzata per impostare la larghezza massima di un elemento.
Il max-width può essere specificata in valori di lunghezza, come px, cm , ecc, o in percentuale (%) del blocco contenitore, o impostato su none (questo è predefinita. Significa che non vi è alcuna larghezza massima).
Il problema con il <div> sopra si verifica quando la finestra del browser è minore della larghezza dell'elemento (500px). Il browser quindi aggiunge una barra di scorrimento orizzontale alla pagina.
Utilizzando max-width invece, in questa situazione, migliorerà la gestione del browser di piccole finestre.
Suggerimento: Trascinare la finestra del browser per più piccola di 500px di larghezza, per vedere la differenza tra i due div!
Nota: Il valore del max-width modifiche locali alle proprietà width .
L'esempio seguente mostra un <div> elemento con un'altezza di 100 pixel e un max-larghezza di 500 pixel:
Provate voi stessi - Esempi
Impostare l'altezza e la larghezza degli elementi
Questo esempio mostra come impostare l'altezza e la larghezza di elementi diversi.
Impostare l'altezza e la larghezza di un'immagine utilizzando cento
Questo esempio mostra come impostare l'altezza e la larghezza di un'immagine utilizzando un valore percentuale.
Impostare min-width e max-larghezza di un elemento
Questo esempio mostra come impostare una larghezza minima ed una larghezza massima di un elemento con un valore di pixel.
Set min-height e max-height di un elemento
Questo esempio mostra come impostare una altezza minima e un'altezza massima di un elemento con un valore di pixel.
Mettiti alla prova con esercizi!
Tutte le proprietà CSS Dimension
| Proprietà | Descrizione |
|---|---|
| height | Imposta l'altezza di un elemento |
| max-height | Imposta l'altezza massima di un elemento |
| max-width | Imposta la larghezza massima di un elemento |
| min-height | Imposta l'altezza minima di un elemento |
| min-width | Imposta la larghezza minima di un elemento |
| width | Imposta la larghezza di un elemento |