Il concetto di BOX MODEL

  • Box Model: Tutti gli elementi in CSS sono considerati scatole. Il loro comportamento può essere di tipo “block” o “inline” a seconda della regola display.
  • Elementi Block vs Inline: Gli elementi “block” creano una nuova riga e rispettano padding, margin e border. Gli elementi “inline” invece non creano una nuova riga e non applicano padding e margin verticali.
  • Box Sizing: Esistono due tipi di box model: content-box (di default, dove altezza e larghezza si applicano al contenuto) e border-box (dove altezza e larghezza comprendono padding e bordi).
  • Inline-block: Combina i comportamenti “inline” e “block”, mantenendo l’elemento sulla stessa riga ma permettendo l’applicazione di padding e margin verticali.
  • Proprietà CSS correlate: Margini, padding e bordi possono essere gestiti con regole compresse per semplificare il codice, applicando le stesse proprietà a più lati dell’elemento.

Lascia un commento