box model

Calcolo dimensioni elementi e funzionamento box model in HTML

Ripassiamo un po’ di HTML, sì, partiamo da prima delle basi, fa sempre bene. Quando abbiamo iniziato a fare le prime guide PHP partendo dalla base della base ci siamo resi conto che potevamo andare oltre: prima della base!

Più che HTML oggi vediamo una partizione interessante che riguarda anche i CSS, dunque l’elemento funzionale allo stile di una pagina web, o meglio è un qualcosa che riguarda entrambi, appunto perché “si parlano fra di loro”.

Calcolo dimensioni elementi

Il browser, quando renderizza un elemento, genera internamente un rettangolo che contiene l’elemento stesso.  La dimensione del rettangolo è pari alla dimensione dell’elemento contenuto. A questo punto il browser prende in considerazione il padding aggiungendo questo spazio ai quattro lati dell’elemento.

Il secondo passo è quello di creare un nuovo rettangolo la cui dimensione è data da quella dei rettangoli precedenti con l’aggiunta del parametro border. Infine viene creato un quarto rettangolo la cui dimensione è data dalla dimensione del precedente rettangolo più il parametro margin.

Padding

Funzionamento Box Model

Il funzionamento del box model può essere influenzato con la proprietà box-sizing che può assumere i seguenti valori:

  • content-box: il valore di width fa riferimento all’area del contenuto (il che equivale a seguire la regola e il comportamento qui sopra citati);
  • border-box: il valore di width fa riferimento al box nella sua interezza, comprendendo cioè anche il padding e il bordo.

LaraMind, la tua scuola italiana Laravel, Vue.js e non solo

Corsi Laravel, Node.js e Vue.js e non solo, LaraMind è anche corsi di PHP e JavaScript!

Dai un’occhiata anche a tutto il nostro comparto corsi custom! LaraMind offre soluzioni custom di tutti i tipi, dalle lezioni private ai corsi custom per interi reparti d’azienda.

Non solo formazione, LaraMind offre anche consulenza di alto livello per quanto riguarda Laravel, Vue.js, Node.js, PHP e JavaScript.

 

Leave a reply