Dimensioni
CSS permette di gestire la larghezza e l'altezza di ogni elemento html singolarmente. Si può esprimere un valore preciso, un valore minimo e un valore massimo. È bene ricordare che le proprietà di width (larghezza) ed height (altezza) si riferiscono solo alla parte del contenuto dell'elemento HTML e quindi escludono la parte di padding e margin.
Larghezza
Per impostare la larghezza di un elemento si possono usare 3 attributi: width, min-width e max-width.
width
Imposta il valore della larghezza dell'elemento. È possibile specificare un valore con unità di misura, un valore percentuale (calcolato rispetto all'elemento contenitore) oppure il valore auto, dove è il browser che calcola la dimensione.
Ad esempio, per specificare la larghezza di 100px di un'immagine:
min-width
Imposta il valore di larghezza minima, in modo che la larghezza dell'elemento non sia mai inferiore a min-width. Se la larghezza risulta essere più piccola di min-width, la larghezza sarà impostata a min-width. Se, invece, la larghezza supera min-width, il valore specificato in min-width è ignorato.
Il valore di min-width può essere espresso secondo un'unità di misura o una percentuale calcolata rispetto all'elemento contenitore.
Esempio: impostare la larghezza minima al 70% dell'elemento genitore del paragrafo (es. body o un div):
max-width
Imposta il valore di larghezza massima. Se la larghezza dell'elemento risulta inferiore a max-width, questo attributo non ha effetto. Se, invece, la larghezza dovesse risultare superiore
a max-width, questa proprietà fa sì che la larghezza massima non sia superata.
In questo caso la larghezza dell'elemento è pari a max-width, l'altezza, invece,
si modifica automaticamente.
Il valore di max-width può essere espresso secondo un'unità di misura o una percentuale calcolata rispetto all'elemento contenitore.
Per impostare ad un paragrafo la larghezza massima di 50px:
Altezza
Anche per quanto riguardo l'altezza esistono 3 attributi: height, min-height e max-height.
height
Imposta il valore dell'altezza dell'elemento. È possibile specificare un valore con unità di misura, un valore percentuale (calcolato rispetto all'elemento contenitore) oppure il valore auto, dove è il browser che calcola la dimensione.
Ad esempio, per specificare l'altezza di 5cm di un'immagine:
min-height
Imposta il valore di altezza minima, in modo che l'altezza dell'elemento non sia mai inferiore a min-height. Se l'altezza risulta essere più piccola di min-height, l'altezza sarà impostata a min-height. Se, invece, l'altezza supera min-height, il valore specificato in min-height è ignorato.
Il valore di min-height può essere espresso secondo un'unità di misura o una percentuale calcolata rispetto all'elemento contenitore.
Esempio: impostare l'altezza minima al 20% dell'elemento genitore del paragrafo (es. body o un div):
max-height
Imposta il valore di altezza massima. Se l'altezza dell'elemento risulta inferiore a max-height, questo attributo non ha effetto. Se, invece, l'altezza dovesse risultare superiore
a max-height, questa proprietà fa sì che l'altezza massima non sia superata.
In questo caso l'altezza dell'elemento è pari a max-height, l'altezza, invece,
si modifica automaticamente.
Il valore di max-height può essere espresso secondo un'unità di misura o una percentuale calcolata rispetto all'elemento contenitore.
Per impostare ad un paragrafo l'altezza massima di 200pt:
Overflow
L'altezza e la larghezza di un elemento possono risultare un po’ strette a volte. Altre volte, invece, si possono usare per delimitare l'area di un elemento e far sì che questo non fuoriesca dall'area prescelta.
La proprietà di overflow si occupa proprio di risolvere questi problemi. In base alla necessità permette di specificare diversi comportamenti per l'elemento:
Valore di default, se l'elemento eccede la width e la height specificate non succede nulla. Semplicemente, il contenuto dell'elemento andrà oltre i suoi confini definiti con width ed height.
Testo del paragrafo
La parte del contenuto che dovrebbe andare oltre la width e o la height dell'elemento è tagliata.
Sono create delle barre di scorrimento per permettere all'utente di visionare il contenuto che eccede le misure date da width e height. Le barre sono comunque mostrate anche s el'overflow non avviene.
Testo del paragrafo