Box Model

Iniziamo a spiegare le regole degli elementi di tipo block.

Elementi blocco e in linea

  • block-level – sono elementi contenitore di altri elementi di tipo blocco o inline;
  • inline – possono contenere solo altri elementi inline;

Gli elementi block producono un ritorno a capo e generalmente vengono usati per definire la struttura del sito mentre inline non producono un ritorno a capo e riguardano il contenuto.

Il block-model prevede l’area dei contenuti, un padding, un bordo e un margine. L’ingombro del box è dato dalla somma di questi quattro elementi.

.box {
width: 250px;
padding: 10px;
border: 2px; solid #000;
margin: 15px;
}

Quindi l’ingombro è: 250 +10 * 2 + 2 * 2 + 15 * 2 = 304

Vediamo le principali proprietà:

  • width – indica la larghezza espressa in valore numerico (ad esempio in pixel) o in percentuale, in mancanza si espande per tutta la larghezza disponibile;
  • min-width e max-width – esprimono una larghezza minima e massima in valore numerico (ad esempio in pixel) o in percentuale;
  • height – indica l’altezza espressa in valore numerico (ad esempio in pixel) o in percentuale;
  • min-height e min-width – esprimono un’altezza minima e massima in valore numerico (ad esempio in pixel) o in percentuale;

Possiamo prevedere cosa fare se i contenuti del box superano lo spazio assegnato;

  • visible – tutto il contenuto resta visibile;
  • hidden – il contenuto eccedente non viene mostrato;
  • scroll – il contenuto è visibile utilizzando le barre di scorrimento;
  • auto – vengono applicate le regole di default del browser;

Tramite padding definiamo lo spazio tra l’area dei contenuti ed il confine interno del box, viene utilizzato quando vogliamo distanziare il bordo o il contenuto dal box. I valori partendo da sinistra sono: superiore, destro, inferiore, sinistro. Possiamo anche definire singolarmente i valori:

  • padding-top – superiore;
  • padding-bottom – inferiore;
  • padding-left – sinistro;
  • padding-right – destro;

Tramite margin assegniamo un margine esterno al box, l’assegnazione dei valori è uguale a quelli di padding. Il margine può avere dei dati negativi ed in questo caso l’elemento esce dai confini del box genitore.

Se due box sono adiacenti verticalmente succede che collassano e il margine tra i due box è quello maggiore e non la somma dei due margini.

Per il bordo possiamo definire: spessore, stile e colore. Per i margini vale la stessa regola applicata al padding.

  • spessore: può avere un valore numerico oppure una stringa (thin, medium, thick)
    • border-top-width;
    • border-bottom-width;
    • border-left-width;
    • border-right-width;
  • stile: può assumere una stringa (none, hidden, dotted, dashed, solid, double, groove, ridge, insert, outset)
    • border-top-style;
    • border-bottom-style;
    • border-left-style;
    • border-right-style;
  • colore: può contenere un valore esadecimale o una parola chiave
    • border-top-color;
    • border-bottom-color;
    • border-left-color;
    • border-right-color;

Possiamo definire un medesimo style a tutti i bordi oppure definirli separatamente (border-top, border-bottom, border-left, border-right).

Please follow and like us:

Lascia un commento