L’altezza e la larghezza di un qualsiasi box model sono definite rispettivamente dalle proprietà height e width. Il loro valore di default è auto, e quindi più testo è contenuto nel box e più esso si estende.

height

La proprietà height definisce la distanza tra il bordo superiore e quello inferiore dell’elemento, non è una proprietà ereditata, i valori ammessi sono:

• unità di misura
• percentuale: Si riferisce all’altezza del contenitore se quest’ultimo ha già un’altezza dichiarata altrimenti si comporta come il valore auto.
• auto: Valore di default

se il contenuto del box supera l’altezza impostata nella proprietà height si possono avere problemi di visualizzazione, nel caso di firefox ad esempio, il testo si estende verticalmente e si sovrappone agli altri elementi, per ovviare a questo problema possiamo utilizzare la proprietà overflow.

Questa proprietà non è ereditata e può essere applicata a tutti gli elementi di blocco, i suoi possibili valori sono:

• visible: Il contenuto in eccesso và a sovrapporsi agli elementi posti successivamente
• hidden: Il testo in eccesso non viene mostrato
• scroll: vengono create delle barre di scorrimento per fare in modo che il contenuto possa essere visualizzato
• auto: il comportamento del browser dipende dalle sue impostazioni

Ci sono altre due proprietà che consentono di definire un massimo o un minimo valore di altezza dell’elemento, max-height (altezza massima) e min-height (altezza minima), non sono ereditate ma purtroppo non sono supportate da Internet Explorer . Tali proprietà possono essere applicate a tutti gli elementi  tranne che a quelli di tabelle ed agli elementi in linea non rimpiazzati. I loro valori possono essere espressi con un’unità di misura oppure con la percentuale, il valore di default è auto.

width

La proprietà width, non definisce la larghezza complessiva del box model, ma solo la larghezza dell’area dei contenuti, la larghezza totale invece è data dalla somma di alcuni valori:
margin-left + border-left +padding-left + width + padding-right + border-right + margin-right
Bisogna sapere che Internet Explorer  fino alla sua verrsione 5.5 interpreta la proprietà width in maniera diversa, cioè come la somma totale di bordi, margini, padding e contenuto. La proprietà width può essere applicata a tutti gli elementi di blocco e non è ereditata, essa può essere dichiarata utilizzando i seguenti valori:

• unità di misura
• auto: E’ il valore di default, la larghezza dell’elemento è uguale all’area del contenuto dell’elemento contenitore, ma solo nel caso in cui non siano stati impostati margini, bordi e padding.
• percentuale:  In base alla larghezza dell’elemento contenitore, ma solo nel caso in cui quest’ultimo abbia già un’altezza dichiarata altrimenti si comporta come il valore auto.

Nel caso in cui si vogliano impostare una larghezza minima ed una larghezza massima dell’elemento si possono utilizzare le proprietà min-width (larghezza minima) e max-width (larghezza massima), tali proprietà possono essere applicate a tutti gli elementi tranne che a quelli di tabelle ed agli elementi in linea non rimpiazzati. I valori di queste proprietà possono essere espressi con unità di misura, percentuale o tramite la parola chiave auto che è il valore di default.