Corso HTML e CSS (23^ lezione): CSS: Box model (6^parte)

Impariamo a costruire un sito Web

Lezione 23: CSS: Box model (6^parte).

 

Vediamo dunque tutte le rimanenti proprietà che possiamo usare per stilizzare un box.

b) Colori, sfondi e dimensioni (cont.)


height Imposta l’altezza di un elemento.I valori che questa proprietà può assumere sono:

auto L’altezza verrà calcolata dal browser. Questo è il default.
altezza Un’altezza espressa in pixels, em, cm , etc.
% Un’ altezza espressa in %
inherit Specifica che l’altezza dell’elemento sarà ereditata dall’elemento padre.

Es d’uso:

.quadrato {

height:80px;

width: 80px;

}

Gli elementi ai quali verrà assegnata questa classe avranno altezza e larghezza di 80px.

 

max-height Imposta l’altezza massima di un elemento. Se viene impostata questa proprietà l’altezza dell’elemento non potrà eccedere questo valore.La massima altezza non include il padding, i bordi e i margini.I valori che questa proprietà può assumere sono:

none Nessun valore massimo. Questo è il default.
altezza Un’altezza massima espressa in pixels, em, cm , etc.
% Un’altezza massima espressa in %
inherit Specifica che il valore dell’altezza massima dell’elemento sarà ereditata dall’elemento padre.
min-height Imposta l’altezza minima di un elemento. Se viene impostata questa proprietà l’altezza dell’elemento non potrà essere meno di questo valore.La minima altezza non include il padding, i bordi e i margini.I valori che questa proprietà può assumere sono:

none Nessun valore minimo. Questo è il default.
altezza Un’altezza minima espressa in pixels, em, cm , etc.
% Un’altezza minima espressa in %
inherit Specifica che il valore dell’altezza minima dell’elemento sarà ereditata dall’elemento padre.
width Imposta la larghezza di un elemento.I valori che questa proprietà può assumere sono:

auto La larghezza verrà calcolata dal browser. Questo è il default.
larghezza Una larghezza espressa in pixels, em, cm , etc.
% Una larghezza espressa in %
inherit Specifica che la larghezza dell’elemento sarà ereditata dall’elemento padre.

Es d’uso:

.quadrato {

height:80px;

width: 80px;

}

Gli elementi ai quali verrà assegnata questa classe avranno altezza e larghezza di 80px.

max-width Imposta la larghezza massima di un elemento. Se viene impostata questa proprietà la larghezza dell’elemento non potrà eccedere questo valore.La massima larghezza non include il padding, i bordi e i margini.I valori che questa proprietà può assumere sono:

none Nessun valore massimo. Questo è il default.
altezza Una larghezza massima espressa in pixels, em, cm , etc.
% Una larghezza massima espressa in %
inherit Specifica che il valore della larghezza massima dell’elemento sarà ereditata dall’elemento padre.
min-width Imposta la larghezza minima di un elemento. Se viene impostata questa proprietà la larghezza dell’elemento non potrà essere meno di questo valore.La minima larghezza non include il padding, i bordi e i margini.I valori che questa proprietà può assumere sono:

none Nessun valore minimo. Questo è il default.
altezza Una larghezza minima espressa in pixels, em, cm , etc.
% Una larghezza minima espressa in %
inherit Specifica che il valore della larghezza minima dell’elemento sarà ereditata dall’elemento padre.

 

c) Margini interni ed esterni

margin Imposta i margini di un box. Con questa proprietà si possono assegnare in un’unica dichiarazione i 4 margini dell’elemento.Nell’ordine si possono impostare:margin-top, margin-right, margin-bottom, margin-left

Si possono indicare da 1 a 4 margini:

– Se si indicano 4 margini si riferiscono nell’ordine a top, right, bottom, left (antiorario partendo da top)

– Se si indicano 3 margini, il margine di mezzo va attribuito sia al lato sinistro, sia al destro

– Se si indicano 2 margini, il primo si riferisce a top e bottom ed il secondo a left e right

– Se si indica 1 solo margine ovviamente va applicato ai quattro lati del box.

 

I valori che possono essere assegnati a ciascun margine sono:

auto Il margine verrà calcolato dal browser.
lunghezza Il margine espresso in pixels, em, cm , etc.
% Il margine espresso in % della larghezza dell’elemento contenitore.
inherit Specifica che Il margine sarà ereditato dall’elemento padre.

Es d’uso:

margin:10px 0 20px 10px;

margin-top Imposta il margine alto di un box.I valori possono essere quelli già descritti per margin.
margin-right Imposta il margine destro di un box.I valori possono essere quelli già descritti per margin.
margin-bottom Imposta il margine basso di un box.I valori possono essere quelli già descritti per margin.
margin-left Imposta il margine sinistro di un box.I valori possono essere quelli già descritti per margin.
padding Imposta i margini interni di un box. Con questa proprietà si possono assegnare in un’unica dichiarazione i 4 valori di padding dell’elemento.Nell’ordine si possono impostare:padding-top, padding-right, padding-bottom, padding-left

Si possono indicare da 1 a 4 valori di padding:

– Se si indicano 4 valori si riferiscono nell’ordine a top, right, bottom, left (antiorario partendo da top)

– Se si indicano 3 valori, il valore di mezzo va attribuito sia al padding del lato sinistro, sia a quello destro

– Se si indicano 2 valori, il primo si riferisce a top e bottom ed il secondo a left e right

– Se si indica 1 solo valore ovviamente va applicato al padding dei quattro lati del box.

I valori che possono essere assegnati a ciascun valore di padding sono:

lunghezza Il padding espresso in pixels, em, cm , etc.
% Il padding espresso in % della larghezza dell’elemento contenitore.
inherit Specifica che Il padding sarà ereditato dall’elemento padre.

Es d’uso:

padding:10px 0 20px 10px;

padding-top Imposta il margine interno alto di un box.I valori possono essere quelli già descritti per padding.
padding-right Imposta il margine interno destro di un box.I valori possono essere quelli già descritti per padding.
padding-bottom Imposta il margine interno basso di un box.I valori possono essere quelli già descritti per padding.
padding-left Imposta il margine interno sinistro di un box.I valori possono essere quelli già descritti per padding.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.