CSS3 - thumbnail - il box model

Ogni elemento HTML è una scatola composta da diverse parti, capire come funziona, da quali parti è composta e come questi parti si comportano è essenziale per capire il CSS e come disporre gli elementi sullo schermo.

Esempio di Box Model

Al centro della box troviamo il contenuto, detto content box. Il contenuto ha una ampiezza, width, e una altezza, heigth. Poi abbiamo border, il bordo, che come si può capire dal nome è appunto il bordo della scatola. Lo spazio fra il bordo e il contenuto viene chiamato padding, e lo spazio il bordo gli altri elementi viene chiamato margin, margine. Tutti queste parti si possono modificare con il CSS, guarda il video dedicato a questo tutorial su YouTube.

Box-sizing: content-box Vs. border-box

La proprietà box-sizing è di default impostata su content-box, questo potrebbe creare dei problemi quando vogliamo cambiare le dimensioni degli elementi e disporli sullo schermo. Content-box non tiene in cosiderazione il padding e il border.

Box-sizing: content-box;

Mettiamo caso che ho un elemento con l’ampiezza di 200 px, se la proprietà box-sizing impostata su content box e aggiungo 20px di padding l’ampiezza totale dell’elemento diventerà di 240 px, 200 per il content box più 20 per il padding a sinistra e 20 per quello a destra. Mentre se ho il box-sizing impostato su border-box posso aggiungere quanto padding e border che voglio ma l’ampiezza totale dell’elemento rimmarrà sempre di 200px, nei 200px avrò sempre incluso padding e border. Quindi partendo dal presupposto che voglio un elemento con un ampiezza di 200 px a prescindere dal bordo e dal padding è necessario cambiare questa proprietà.

Box-sizing: border-box;

Per questo motivo è prassi fra gli sviluppatori web moderni aggiungere le seguenti linee si codice al inizio di ogni file CSS:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Così da avere tutti gli elementi, anche quelli pseudo, con box-sizing: border-box; .

Inoltre è buona pratica anche togliere dal proprio CSS anche il margin ed il padding che ogni browser aggiunge di default. Questo lo si fa aggiungendo margin: 0; e padding: 0; alla precedente dicharazione.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Capire come funziona il box-model è fondamentale, fa parte delle basi, un tassello indispensabile per avere la totale padronanza del CSS.


Guarda il video:

Articoli simili