Il Box Model

0
83

Se siete dei principianti in assoluto vi consiglio di saltare questa parte della guida passando direttamente ai links. Potrete sempre tornare dopo aver capito i meccanismi ed aver acquisito una certa familiarità con l’uso dei css. 

Una delle cose più importanti introdotte con i CSS è il box model che permette di creare una struttura (layout) fatta da rettangoli e/o quadrati, praticamente colonne e righe con o senza bordo che servono per poter impaginare i dati quali: testi, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina web.

Questo il codice in css per definirlo:

#box {
width: 350px;
height: 150px;
padding: 20px;
border: solid 5px;
margin: 20px;
}

Dove: width e height sono rispettivamente larghezza ed altezza del contenitore e di conseguenza va proporzionato rispetto a quello che potrà essere inserito al suo interno.
padding lo spazio fra i contenuti ed il bordo del box.
border lo spessore del bordo perimetrale del box.
margin la distanza del box dagli altri elementi della pagina.

box model

Questo il codice html per richiamarlo all’interno della pagina:

<div id=”box”>Testo di prova per riempire il box… </div>

Questo il risultato a video:

Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per

Da notare che la larghezza e l’altezza totale di un box sono dati dalla somma dei contenuti più quello del padding più quello dello spessore del bordo. Nel nostro caso lo spazio occupato realmente sarà: 350 + 20 + 20 + 5 + 5 = 400 pixel per la larghezza e 150 + 20 + 20 + 5 + 5 = 200 pixel in altezza. Praticamente le misure specificate (350 x 150) si riferiscono ai contenuti.

Questo è vero per molti browser tranne alcuni, per esempio IE (internet explorer), il famoso browser della Microsoft, il più adoperato ma anche quello che meno di altri rispetta le direttive del W3C. Li chiameremo bugs e di questi ce ne sono diversi che si vanno ad aggiungere a molte proprietà dei CSS che non sono supportate. Pazienza, noi naviganti confidiamo nelle versioni future e nel frattempo chiediamoci come mai noi creatori di siti web ci diamo tanto da fare per adeguarci ai nuovi metodi quando poi certe case produttrici di browser possono fare come gli pare. Ma questo è un discorso che qui non c’entra molto.

Se si tratta di un solo box probabilmente nessuno si accorgerebbe di eventuali differenze ma dovendo creare un layout formato da più box ecco che le differenze si noterebbero. Qualche pixel in più o qualche pixel in meno sarebbe sufficiente per scombinare tutta l’impaginazione, per fortuna si può rimediare, vediamo come.

Internet Explorer nelle versioni 5 e 5.5 ma anche per la versione 6 (se opera in quirks mode) considera la larghezza e l’altezza dei contenuti sottraendo dalle misure specificate quelle dello spessore del bordo e dello spazio padding. Nel nostro caso il box esterno sarà realmente 350 x 150 Pixel ma il box dei contenuti si rimpicciolisce diventando: 350 – 20 – 20 – 5 – 5 = 300 pixel per la larghezza e 150 – 20 – 20 – 5 – 5 = 100 pixel per l’altezza. 

In questo esempio la differenza sarebbe notevole se visto con un browser che non ha bugs ed un browser IE V.5, Considerando che IE sottrae bordo e padding dalla larghezza e dall’altezza totale, si potrebbe risolvere creando due box, uno interno all’altro dove nel box esterno non si specificano ne bordi ne padding che specificheremo nel box interno.

#box-esterno {
width: 400px;
height: 200px;
}

#box-interno{
padding: 20px; 
border: solid 5px;
margin: 20px;
}

Questo il codice html per richiamarlo all’interno della pagina:

<div id=”box-esterno”><div id=”box-interno”>  Testo di prova per riempire il box… </div></div>

Questo il risultato a video:

Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per

Il risultato a video è lo stesso per tutti i browser ed il bug di IE non assegnerà al box dei contenuti misure differenti perchè se è vero che il problema nasce quando nel box vengono definite misure di larghezza altezza insieme ai bordi o al padding, il box interno non ha misure dalle quali sottrarre bordi e padding mentre nel box esterno non ci sono bordi e padding da sottrarre alle misure.

PS: se vedete i due box diversi frà di loro il vostro browser è uno di quelli affetti da bug del box model. Ne approfitto per ricordare che tenere aggiornato il proprio browser alla sua ultima versione offre garanzie non solo per bug di visualizzazione ma anche di sicurezza, per cui andrebbe sempre aggiornato visto poi che l’operazione è completamente gratuita.

Continua: posizionare il Il Box Model

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteGrafica: come posizionare gli oggetti 
Prossimo articoloCome posizionare il Box Model
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here