Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

altezza e larghezza nel box model

11 luglio 2011, Scritto da , category css

L’altezza height

L’altezza del box model è determinata dalla quantità di contenuto presente nel box, salvo diverse specifiche.

La proprietà per fissare l’altezza, come avrete già capito, è height e definisce la distanza tra il bordo superiore e quello inferiore.

L’altezza non è una regola ereditabile. Questo vuol dire che se io, per esempio, avessi due div annidati, il primo (quello esterno) con altezza 200px, quello interno non eredita tale altezza ma avrà un’altezza tutta sua (determinata dalla quantità del contenuto o dalla specifica height: __px).

L’altezza è una proprietà applicabile a tutti gli elementi tranne a quelli di tipo inline.

La sintassi è, semplicemente:

div {height:100px}

I valori che l’altezza può assumere sono:

  • px: pixel è la dimensione precisa
  • %: percentuale, è una misura relativa
  • auto: valore di default, calcolato sulla base del contenuto del box

NB: Nel caso in cui il box abbia un’altezza specifica è possibile che il testo, qualora dovesse superare lo spazio concesso, si comporti diversamente a seconda del browser.

In passato, per esempio, ricordo che Opera ed Explorer adattavano “sfondando” il box in modo da mostrare tutto il testo presente mentre Firefox era molto più rigido e nascondeva parte del testo in eccesso.

Overflow

La proprietà overflow serve per gestire un contenuto nel caso in cui esso superi i limiti imposti dalla proprietà height.

Non è una proprietà ereditaria e può assumere i seguenti valori:

  • visible: in questo caso il contenuto in eccesso resta visibile
  • hidden: il contenuto in eccesso viene nascosto
  • scroll: viene (sempre) aggiunta una barra di scorrimento laterale
  • auto: valore predefinito e tende a comportarsi come scroll ma solo nel caso in cui il contenuto superi l’altezza disponibile

min-height / max-height

Con queste due proprietà è possibile impostare un’altezza minima/massima sopra o sotto la quale il box non deve scendere/salire. Sono proprietà non supportate da IE, almeno nelle versioni antecedenti alla 8.

La larghezza width

Analogamente a quanto scritto per l’altezza possiamo scrivere che la larghezza le proprietà e le caratteristiche sono le medesime. Anche la sintassi è la stessa con l’ovvia eccezione data dal fatto che la proprietà per la larghezza si scrive width.

La larghezza, dunque, non è ereditabile, e, nel caso di browser obsoleti può essere resa in maniera non sempre uguale.

Internet Explorer, per esempio, almeno fino alla versione 8, interpreta erratamente la larghezza del box model infatti, mentre secondo lo standard W3C la larghezza è data dalla somma dei margin + border + padding + width, secondo IE la larghezza complessiva comprende anche il padding.

Es:

div {width: 200px; padding: 10px;}

con Internet Explorer quanto sopra genera un box model di 220px (200 di width + 10 + 10 di padding) mentre secondo il W3C (e, quindi, secondo tutti i browser che ne rispettano le specifiche) il box-model del div sopra riportato rimane sempre di 200px di larghezza.

min-width / max-width

Anche per la larghezza abbiamo la possibilità di specificare una larghezza minima/massima sotto la quale non scendere/salire.