Salve e benvenuto.
E' ciò che in gergo tecnico viene definito "CSS box model reset".cosa sta ad indicare questa proprietà???
In poche parole: il normale meccanismo di calcolo delle geometrie di un elemento HTML rappresentato attraverso il CSS (appunto, "CSS box model"), non include gli "ingombri" di padding e border, ma solo del contenuto interno dell'elemento stesso.
Il valore di default della proprietà "box-sizing" è infatti "content-box". Ciò significa che impostando, ad esempio, width:100px ad un elemento, la sua larghezza totale sarà 100px (riferita al suo contenuto interno) più gli eventuali ingombri dati dalle dimensioni del padding e dei bordi. Per cui l'elemento in sé occuperà più di 100px se padding e border sono maggiori di 0.
Impostando invece il valore "border-box" sono inclusi padding e border, per cui la larghezza totale dell'elemento sarà esattamente 100px.
Chiaramente ci possono essere specifiche situazioni, più o meno complesse, in cui si può preferire un approccio piuttosto che l'altro. In genere, per quelli che possono essere i moderni canoni dei layout HTML, si tende ad usare "border-box" su tutti gli elementi.
In quella regola, il selettore asterisco (*) indica "qualsiasi elemento", per cui il "reset" è applicato a tutti gli elementi nel documento. Tale proprietà in genere viene estesa anche agli pseudo elementi (di norma non compresi dal selettore asterisco) in una forma del genere:
Per ulteriori informazioni posso consigliarti di fare qualche ricerca con i termini chiave indicati: "CSS box model reset"codice:html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Tra i link utili CSS (discussione in evidenza) puoi trovare vari riferimenti a guide e documentazioni riguardo il box model: vedi "Come funzionano i CSS – concetti e meccanismi di funzionamento" sotto la voce "Box model".
Buon proseguimento.
[Mod] Quando posti del codice sul forum è opportuno usare gli appositi tag di formattazione (vedi regolamento di sezione). Per ora ho corretto io, fai attenzione in futuro. Grazie.


Rispondi quotando
