Corsi on-line

CSS: height e min-height non sono equivalenti

Per quanto analizzando il contenuto dei fogli di stile e le regole CSS utilizzate in numerosi progetti non sia raro osservare come le proprietà height e min-height vengano spesso impiegate quali elementi intercambiabili, è necessario sottolineare che queste ultime non sono equivalenti; per avere una prima conferma di quanto appena affermato è possibile consultare il manuale ufficiale del W3C (World Wide Web Consortium) che, relativamente a height sottolinea che:CSS

The height property sets the height of an element.

Mentre, spiegando quale sia la funzione svolta da min-height, ricorda con chiarezza che:

The min-height property is used to set the minimum height of an element.

In sostanza quindi min-height entra in gioco anche con il compito di prevenire che il valore della proprietà height diventi inferiore all’altezza minima stabilita tramite la prima; ecco quindi spiegato il motivo per il quale min-height può effettuare l’override (in sostanza, riscrivere i valori) sia di max-height che di height, come nell’esempio seguente.

.box {
  min-height: 400px;
  height: 200px;
  max-height: 300px;
}

Inoltre, ecco perché alle due regole seguenti non potrà essere associato lo stesso significato:

.box {
	height: 100px;
}
.box {
	min-height: 100px;
}

Praticamente, nel caso di height, quando il contenuto di un elemento/contenitore supera l’altezza definita tramite la proprietà si avrà una fuoriuscita che potrà essere impedita solo grazie all’adozione di overflow; con min-height, invece, verrà stabilita un’altezza minima per un elemento e tale valore non avrà alcuna influenza sull’altezza del suo contenuto.

Per approfondire: Gabriele Romanato

Post correlati
I più letti del mese
Tematiche