Ciao a tutti! 🙂

In questo articolo vi mostrerò che cos’è il Box Model e che relazione ha con i fogli di stile CSS.

Ogni elemento che compone una pagina web viene considerato come un box rettangolare. Tale elemento, pensiamo ad esempio a un <h1>, ha un suo contenuto racchiuso entro i limiti del box.

Ogni elemento html avrà quindi un’altezza e una larghezza, come mostrato in figura.

boxmodel-1

I valori dell’altezza e della larghezza determinano le dimensioni dell’oggetto; uno degli errori più comuni è quello di pensare che lo spazio occupato dagli elementi dipenda appunto solo dalla larghezza e dall’altezza dell’oggetto. In realtà, le dimensioni occupate dall’elemento dipendono da altri fattori:

  1. Margine: è la spaziatura esterna che separa l’oggetto dagli altri oggetti che si trovano vicino ad esso e che sono contenuti all’interno della stessa pagina.
  2. Bordo: fa riferimento allo spessore della linea che fa da limite del box. Se il bordo è più spesso allora l’oggetto occuperà più spazio! 😉
  3. Padding (o spaziatura interna): è lo spazio che separa il contenuto dell’oggetto dal suo bordo. Se l’elemento dovesse quindi avere un padding la sua larghezza totale aumenta con l’aumentare del valore del padding di sinistra e di destra; allo stesso modo accade per l’altezza totale dell’oggetto, ovvero che dipenderà dal valore del padding superiore e inferiore.
  4. L’area del contenuto: è quello spazio che verrà veramente occupato dal nostro oggetto (testo, immagini e video).

boxmodel2

Per poter calcolare la dimensione effettiva del nostro oggetto si devono tenere conto tre concetti fondamentali:

  • La larghezza dell’area del contenuto, data dal valore della proprietà widht (ovvero larghezza);
  • La larghezza complessiva (ovvero: margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro);
  • La larghezza dell’area visibile (ovvero la larghezza data dalla somma del bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro).

ATTENZIONE: border a padding allargano le dimensioni del contenuto dell’elemento, ma non dello spazio esterno ad esso.

Anche il margine influisce sullo spazio occupato dall’oggetto nella pagina, ma si tratta di uno spazio non visibile (ovvero che non fa parte della grafica dell’elemento).

Proviamo a fare un esempio con un’immagine avente come larghezza (widht) 377px e come altezza (height) 340px.


1

CALCOLO DELLA LARGHEZZA COMPLESSIVA

Osservando il codice nell’esempio soprastante, la larghezza complessiva dell’immagine (comprensiva del margine) la calcoleremo nel seguente modo:

margine sinistro (10px) + bordo sinistro (15px) + padding sinistro (30px)

+ area del contenuto (widht 377px)

+ padding destro (30px) + bordo destro (15px) + margine destro (10px)

Totale: 487px

CALCOLO DELL’ALTEZZA COMPLESSIVA

Per poter calcolare invece l’altezza complessiva basta semplicemente applicare le stesse regole che abbiamo usato per la larghezza, per cui avremo:

margine top (10px) + bordo top (15px) + padding top (30px)

+ area del contenuto (height 340px)

+ padding bottom (30px) + bordo bottom (15px) + margine bottom (10px)

Totale: 450px

Nota bene: nell’esempio che vi ho riportato i valori del margin, del border e del padding si ripetevano uguali per tutti i lati dell’immagine, ma ovviamente posso anche inserire valori diversi a mio piacimento (ad esempio: margine sinistro (10px) + bordo sinistro (15px) + padding sinistro (20px) + area del contenuto + padding destro (10px) + bordo destro (30px) + margine destro (5px)).




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.