CSS, la proprietà height

di Michele Costanzo Commenta

CSS proprietà height
La proprietà height nei fogli di stile (CSS) permette di definire l’altezza di un elemento. Il suo comportamento è molto simile a quanto descritto per la proprietà width che abbiamo trattato qualche settimana fa. Peraltro è molto frequente che le proprietà height e width vengano utilizzate contemporaneamente.

Gestire l’altezza con la proprietà height

Supponiamo di voler limitare l’altezza di un blocco <img> (immagine) ad esempio per evitare che i contenuti successivi scivolino troppo in basso nella struttura della pagina. Andremo ad utilizzare la proprietà height con un codice CSS che in generale avrà questa forma:

img {
  height: valore;
}

La proprietà height può assumere sia valori assoluti che percentuali a seconda del risultato che si desidera ottenere.

Altezza assoluta o percentuale

Per la proprietà height è possibile utilizzare anzitutto valori assoluti di lunghezza espressi ad esempio in pixel (px) per la visualizzazione sullo schermo in in millimetri (mm) per la stampa. Più in generale sarà possibile utilizzare tutte le unità di misura riconosciute nei fogli di stile (px, pt, cm, in, mm, pc, em, ex) a seconda che i contenuti siano destinati alla visualizzazione o alla stampa. Il codice corrispondente avrà quindi una forma di questo tipo:

img {
  height: 60px;
}

Nel caso specifico questo spezzone di codice prescrive una altezza di 60 pixel per ogni blocco <img>.

La proprietà height accetta anche valori percentuali intesi come frazione dell’altezza dell’elemento contenitore. Se ad esempio volessimo l’imitare l’altezza del blocco <img> al 50% dell’altezza disponibile utilizzeremmo un codice di questa forma:

img {
  height: 50%;
}

Infine va ricordato che height accetta anche il valore predefinito auto.