Oggi vorrei riprendere un topic già affrontato in precedenza, ovvero quello del BOX MODEL.

Abbiamo visto che il box model definisce i vari riquadri contenuti nella pagina coinvolgendo: altezza e larghezza del contenuto, padding, border e margin.

Quello su cui mi vorrei focalizzare è il box-sizing, ovvero una proprietà CSS3 che gestisce la larghezza (width) del contenuto.

Il box-sizing può assumere due valori:

  1. Content-box (la larghezza, ovvero la width, farà riferimento all’area del contenuto);
  2. Border-box (in questo caso la width comprenderà l’area del contenuto unito al padding e al border).

Ora vi mostrerò un paio di esempi! 😉

Box-sizing: Content-box & Border-box


1

Come ho scritto in precedenza, il content-box si riferisce all’area del contenuto (nel nostro esempio, all’area del testo); mentre il border-box comprende il contenuto fino ad arrivare ai bordi (da cui il nome border-box)! 😉

Se non dovessimo scrivere nulla, di default verrà impostato come valore content-box.

IL VANTAGGIO DELLA BORDER-BOX

Da come potete osservare dall’esempio sottostante, utilizzando il valore border-box e cambiando il valore del padding la dimensione del div non cambia (mentre il testo si adatta allo spazio disponibile).


1

Al contrario, utilizzando il valore content-box la dimensione della vostra box cambierà rischiando di alterare la struttura dell’intera pagina.

Pensate per un attimo alla griglia di Bootstrap!

Se le righe e le colonne fossero state impostate con il valore content-box si sarebbe creato un vero e proprio Picasso!! 😛


1

 

Per oggi è tutto, non esitate a scrivermi per qualsiasi dubbio o chiarimento! 🙂




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.