Abbiamo cominciato a gestire lo spazio mediante il ricorso all'elemento divisione. Ogni divisione ha le sue dimensioni. Queste però non sempre vengono prestabilite. Se nell'elemento di stile che definisce una divisione non vengono precisate le dimensioni orizzontale e verticale della divisione, questa tenderà a occupare tutto lo spazio orizzontale possibile, fino al massimo consentito dal box che contiene la divisione.
Facciamo un esempio.
Scriviamo con blocco note il semplice codice riportato in figura
Il codice definisce una divisione (indicata come class="contenitore") che ne contiene due (class="testo"). Per poterle ben distinguere le abbiamo distanziate con interlinee (<br />), inseriti prima, dopo e tra le due divisioni di testo. Questo è un volgare trucco da non usare mai: vedremo successivamente come distanziare i bordi dei vari box, sia verticlmente che orizzontalmente.
Il risultato di questo codice è riportato in figura:
Si osservi come le divisioni interne (quelle gialle), le cui dimensioni non sono definite, occupino tutto lo spazio orizzontale consentito, mentre invece verticalmente si sviluppano quel tanto che basta a contenere il testo.
Della divisione contenitore (il box verde) è definita solo la larghezza (width: 300px;), che quindi è assoluta, mentre l'altezza non è definita (e diremo che è relativa).
Vedremo nella prossima puntata come controllare la posizione dei box.
***
Nessun commento:
Posta un commento