Sab. Lug 20th, 2019

Box Model in HTML e CSS

Benvenuti in questa nuova guida su HTML e CSS.
In questa guida andremo a introdurre il box model, un argomento molto importante per lo sviluppo di siti web.

Andremo a considerare qualsiasi elemento HTML come una scatola (appunto, box).


Il box model, in CSS, è praticamente una scatola che contiene gli elementi HTML.
Esso è diviso in margin, border, padding e content.

  • Il margin è un’area trasparente, la parte più esterna del box model e si usa per separare l’elemento dagli altri elementi HTML.
  • Il border invece è un’area visibile, di dimensioni, colore e stile variabile, ed è appunto un bordo.
  • Il padding è un’altra area trasparente, è tra il content e il margin, e serve appunto a separare il contenuto dal margine.
  • Il content è semplicemente l’elemento HTML.

Ma cosa usiamo per fare tutto ciò?
Il tag <div> e tutte le sue proprietà per style

Per usarlo basta mettere dentro al tag div tutti gli elementi da inserire nel box model.

Le proprietà principali del tag <div> sono:

  • width ed height: le abbiamo già viste con il tag <img>, servono a modificare rispettivamente larghezza e altezza del box model.
  • margin: serve a definire le dimensioni del margin, quindi la distanza tra il box model e gli altri elementi.
  • border: serve a definire come deve essere il bordo. Al suo interno bisogna scrivere:
    spessore_borde forma_bordo colore_bordo
  • padding: serve a definire le dimensioni del padding, quindi la distanza tra il bordo e il contenuto.

Per questa guida è tutto, nella prossima andremo a vedere più la parte pratica di questo box model.
Se avete altre domande contattatemi su Kirond.
Invece se avete altre guide da consigliare scrivetele al nostro Profilo Ufficiale, Draky00 o al nostro Bot Ufficiale per Limitati.

Risorse

Iscriviti tramite email

Inserisci il tuo indirizzo e-mail per iscriverti a HackTricks, e ricevere via e-mail le notifiche di nuovi post.

Unisciti a 5 altri iscritti