←
Lucio Paolo Asciolla
Senior Full Stack Developer
Con questa proprietà si definisce la distanza tra il bordo superiore e quello inferiore di un elemento
Sintassi:
SELETTORE { HEIGHT: VALORE; }
| valore numerico con unità di misura | è possibile specificare un valore numerico dichiarando l'unità di misura es. 100px |
| valore percentuale | il valore in percentuale è sempre definito rispetto all’altezza del blocco contenitore, purché esso abbia un’altezza esplicitamente dichiarata in alternativa diverrà auto |
| auto | determinata dal contenuto |
.classe {height: 250px;}
#id {height: 50%;}
p {height: auto;}
Grazie alle proprietà min e max height è possibile specificare un valore minimo ed un valore massimo di altezza.
Le proprietà risultano utili in quanto attraverso esse potremo delimitare il valore massimo di riduzione o amento che l'elemento può assumere.
| none | valore iniziale e di default, l’altezza dell’elemento non è limitata |
| valore numerico con unità di misura | è possibile specificare un valore numerico dichiarando l'unità di misura es. 100px |
| valore percentuale | l valore in percentuale è sempre definito rispetto all’altezza del blocco contenitore altrimenti assumerà valore none |
.classe {max-height: 400px;}
#id {max-height: 40%;}
p {max-height: none;}
Il funzionamento delle proprietà width è del tutto identico a quelle delle proprietà height con l'unica differenza che operiamo sulle larghezze quindi sulle misure orizzontali dell'elemento;
Anch'esse si riferiscono alla definizione del valore della larghezza dell'elemento da bordo a bordo quindi escludendo padding e margin.
.classe {max-width: 400px;}
#id {max-width: 40%;}
p {max-width: none;}
.classedue {width: 250px;}
#iddue {width: 50%;}
h1 {width: auto;}