Il box model

Il box model

Ogni tag in una pagina HTML viene considerato dai CSS come un rettangolo (box). Più precisamente una serie di rettangoli uno dentro l'altro. Il rettangolo più interno è il content, cioè il contenuto del tag, il rettangolo più esterno è detto padding, cioè lo spazio tra il contenuto vero e proprio e il bordo del box, ancora più esternamente c'è il bordo. C'è ancora un rettangolo fittizio, cioè il margin, che determina la distanza tra un box e l'altro.

Lo spazio occupato da un elemento è dato dalla somma di content + padding + border mentre il margin rappresenta lo spazio vuoto tra un box ed un altro.

Il content

Il content è il contenuto vero e proprio. E' possibile impostarne la larghezza e l'altezza tramite le proprietà width e height, tenendo sempre conto delle eventuali dimensioni di padding e border che determineranno le dimensioni finali. Larghezza e altezza possono essere espresse in pixel o in percentuali relative all'elemento genitore. Se le dimensioni non sono impostate vengono calcolate automaticamente.

div {
	width: 90%;
}

Esistono anche le proprietà min-width (larghezza minima), min-height (altezza minima), max-width (larghezza massima) e max-height (altezza massima).

div {
	max-width: 1200px;
}

Il padding

Il padding è l'area attorno al contenuto che la separa dal bordo. E' possibile impostarne lo spessore su ogni lato, tenendo sempre conto delle eventuali dimensioni di content e border che determineranno le dimensioni finali. La dimensione può essere espressa in pixel o in percentuali relative all'elemento genitore. Se le dimensioni non sono specificate vengono impostate al valore di default cioè 0.

div {
	padding: 2%;
}

E' possibile impostare un padding diverso per ogni lato del box.

div {
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 10%;
}

E' possibile scrivere tutte queste proprietà in una sola. Se vengono impostati due valori il primo è applicato al padding-top e bottom e il secondo al padding-right e left, se vengono impostati tre valori il primo è applicato al padding-top, il secondo al padding-right e left e il terzo al padding bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left).

div {
	padding: 10px 10% 20px 5%;
}

Il border

Il border è il bordo che circonda il contenuto e l'eventuale padding. E' possibile impostarne lo spessore tramite la proprietà border-width, tenendo sempre conto delle eventuali dimensioni di content e padding che determineranno le dimensioni finali. Lo spessore può essere espresso in pixel, in em (non in percentuale), o tramite le parole chiave thin (sottile), medium o thick (spesso).

div {
	border-width: 2px;
}

E' possibile impostare un border-width diverso per ogni lato del box.

div {
	border-top-width: 10px;
	border-bottom-width: 5px;
	border-left-width: 2px;
	border-right-width: 3px;
}

E' anche possibile scrivere tutte le proprietà in una sola. Se vengono impostati due valori il primo è applicato al border-top e bottom e il secondo al border-right e left, se vengono impostati tre valori il primo è applicato al border-top, il secondo al border-right e left e il terzo al border-bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left)

div {
	border-width: 10px 3px 52px; 
}

Per il border è possibile impostare anche il colore tramite la proprietà border-color:

div {
	border-color: red;
}

E' possibile impostare un border-color diverso per ogni lato del box.

div {
	border-top-color: red;
	border-bottom-color: blue;
	border-left-color: green;
	border-right-color: yellow;
}

E' anche possibile scrivere tutte le proprietà in una sola. Se vengono impostati due valori il primo è applicato al border-top e bottom e il secondo al border-right e left, se vengono impostati tre valori il primo è applicato al border-top, il secondo al border-right e left e il terzo al border bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left)

div {
	border-color: red yellow blue green; 
}

Inoltre è possibile anche definire uno stile del bordo tramite la proprietà border-style, che può avere questi valori: solid (bordo continuo), dotted (puntinato), dashed (tratteggiato), double (doppio), groove (in rilievo), ridge (in rilievo opposto a groove), inset (bordo rientrante) o outset (opposto a inset). Il valore di default è none quindi in qualunque caso dobbiamo dichiarare uno style altrimenti il bordo non si vedrà.

div {
	border-style: solid;
}

E' possibile impostare un border-style diverso per ogni lato del box.

div {
	border-top-style: solid;
	border-bottom-style: dashed;
	border-left-style: dotted;
	border-right-style: double;
}

E' anche possibile scrivere tutte le proprietà in una sola. Se vengono impostati due valori il primo è applicato al border-top e bottom e il secondo al border-right e left, se vengono impostati tre valori il primo è applicato al border-top, il secondo al border-right e left e il terzo al border bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left)

div {
	border-style: solid dotted dashed double; 
}

E' anche possibile impostare tutte le proprietà del bordo in una sola (shorthand property) specificando nell'ordine width style e color.

div {
	border: 5px solid red;
}

Il border-radius

Per impostare un bordo con gli angoli arrotondati ad un elemento dobbiamo usare la proprietà border-radius con valore il raggio della curva che vogliamo assegnare al vertice espresso in px o in em o in percentuale.

div {
	border-radius: 20px;
}

E' possibile impostare un border-radius diverso per ogni lato del box.

div {
	border-top-left-radius: 20px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius:40px;
}

E' anche possibile scrivere tutte le proprietà in una sola. Se vengono impostati due valori il primo è applicato al border-top-left e border-bottom-right e il secondo al border-top-right e border-bottom-left, se vengono impostati quattro valori vengono applicati in senso orario (top-left, top-right, bottom-right, bottom-left).

div {
	border-radius: 20px 10px 30px 40px;
}

E' anche possibile definire un arrotondamento di tipo ellittico impostando due valori agli angoli del bordo, uno per l'arrotondamento orizzontale ed uno per quello verticale.

div {
	border-radius: 20px / 10px;
}

Il border-image

Per impostare come bordo un'immagine dobbiamo usare la proprietà border-image. L'immagine da usare deve essere divisibile in nove parti: quattro angoli, quattro lati e la parte centrale. Le parti angolari formeranno i vertici del bordo, le parti laterali possono essere ripetute o stirate fino a coprire i lati, la parte centrale solitamente è trasparente.

Per definire l'immagine da usare dobbiamo usare la proprietà border-image-source.

div {
	border-image-source: url(percorso-immagine);
}

Per definire le dimensioni delle nove parti in cui verrà divisa l'immagine dobbiamo usare la proprietà border-image-slice. Le dimensioni possono essere espresse in px (senza unità di misura) oppure in percentuale. L'aggiunta della parola chiave fill fa in modo che la parte centrale dell'immagine sia usata per riempire lo sfondo del contenitore a cui stiamo applicando il bordo

div {
	border-image-slice: 20% 25% fill;
}

Per definire lo spessore del bordo dobbiamo usare la proprietà border-image-width. Lo spessore può essere espresso in pixel o in percentuale. Se vengono impostati due valori il primo è applicato al border-top e bottom e il secondo al border-right e left, se vengono impostati tre valori il primo è applicato al border-top, il secondo al border-right e left e il terzo al border bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left).

div {
	border-image-width: 10px 20px 0px 20px;
}

Per definire la distanza dell'immagine dal bordo effettivo dell'elemento dobbiamo usare la proprietà border-image-outset. La distanza può essere espressa in pixel. Se vengono impostati due valori il primo è applicato al border-top e bottom e il secondo al border-right e left, se vengono impostati tre valori il primo è applicato al border-top, il secondo al border-right e left e il terzo al border bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left).

div {
	border-image-outset: 10px 20px 0px 20px;
}

Per definire se le parti laterali dell'immagine devono essere ripetute o stirate dobbiamo usare la proprietà border-image-repeat che può avere tre valori: stretch (l'immagine è stirata), repeat (l'immagine è ripetuta), round (l'immagine è ripetuta e scalata in modo da riempire tutto lo spazio) o space (l'immagine è ripetuta e se non viene riempito tutto lo spazio le immagini vengono distanziate). Se vengono impostati due valori il primo è applicato ai bordi laterali e il secondo ai bordi superiore e inferiore.

div {
	border-image-repeat: round space;
}

E' anche possibile scrivere tutte le proprietà in una sola (shorthand property) specificando nell'ordine source, slice, width, outset e repeat.

div  {
	border-image: url(percorso-immagine) 20% 25% / 10px 20px 0px 20px / 10px 20px 0px 20px round space;
}

Il margin

Il margin è l'area che separa un box da un altro. E' possibile impostarne lo spessore per ogni lato. La dimensione può essere espressa in pixel o in percentuali relative all'elemento genitore. Se le dimensioni non sono specificate vengono impostate al valore di default cioè 0.

div {
	margin: 5%;
}

E' possibile impostare un margin diverso per ogni lato del box.

div {
	margin-top: 2%;
	margin-bottom: 5%;
	margin-left: 10%;
	margin-right: 20px;
}

E' possibile scrivere tutte queste proprietà in una sola. Se vengono impostati due valori il primo è applicato al margin-top e bottom e il secondo al margin-right e left, se vengono impostati tre valori il primo è applicato al margin-top, il secondo al margin-right e left e il terzo al margin bottom, se vengono impostati quattro valori vengono applicati in senso orario (top, right, bottom, left).

div {
	margin: 2% 20px 5% 10%;
}

Per impostare i margin in modo che l'elemento sia posizionato al centro del suo contenitore dobbiamo usare la parola chiave auto per i margin-right e left.

div {
	margin: 0 auto 0 auto;
}

C'è una differenza tra i margin laterali e quelli verticali: i margin laterali di due elementi affiancati si vanno a sommare, invece i margin verticali di due elementi sovrapposti vengono uniti in uno solo che ha le dimensioni del maggiore dei due. Perciò è inutile impostare un margin-bottom per un elemento che sta sopra ed un margin-top per un elemento che sta sotto, tanto ne verrà considerato solo uno, quello maggiore.

<div class="width-max-width">Questo div avrà una dimensione del 90% della larghezza del suo contenitore ma al massimo 200px</div>
<div class="padding">Questo div avrà un padding top e bottom fisso, espresso in pixel, e un padding left e right variabile, espresso in percentuale. Le sue dimensioni totali sono maggiori di 200px per via del padding</div>
<div class="borders">Questo div avrà un bordo diverso per width, colore e stile per ogni lato</div>
<div class="radius">Questo div avrà i bordi arrotondati diversamente per ciascun vertice. Aggiungo anche una proprietà border per far vedere meglio l'effetto ma non è necessario aggiungere un border per poter impostare il border-radius.</div>
<div class="border-image">Questo div avrà un bordo formato da un'immagine virtualmente sezionata in 9 parti uguali. Le parti dell'immagine che si trovano nella prima, terza, quinta e settima posizione andranno a formare i vertici del box, le altre invece saranno i lati.</div>
<div>Tutti i div avranno un margin-top e bottom di 20px ed un margin-right e left con valore auto, cioè tutto lo spazio disponibile sarà impostato automaticamente come margin in ugual misura, di conseguenza i div saranno centrati orizzontalmente</div>

.width-max-width {
  background-color: #ddd;
  width: 90%;
  max-width: 200px;
}
.padding {
  width: 90%;
  max-width: 200px;
  background-color: #ccc;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 10%;
}

.borders {
  width: 90%;
  max-width: 200px;
  background-color: #bbb;
  border-width: 20px 2em 20px 2rem; 
  border-color: fuchsia teal purple aqua;
  border-style: solid dotted dashed double;
}

.radius {
  background-color: #aaa;
  width: 90%;
  max-width: 200px;
  border-top-left-radius: 20px 10px;
	border-top-right-radius: 10px 20px;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 40px;
  border: solid 1px black;
}

.border-image {
  background-color: #999;
  width: 90%;
  max-width: 200px;
  border-image-source: url(https://mdn.mozillademos.org/files/4127/border.png);
  border-image-slice: 20% 25% fill;
  border-image-width: 10px;
  border-image-outset: 30px;
  border-image-repeat: round;
}

div {
  background-color: #888;
  width: 90%;
  max-width: 200px;
  margin: 20px auto 20px auto;
}

// no js