Con questa “pillola” vorremmo rinfrescare un pò la memoria sui valori più importanti della proprietà “display” e come la modifica del ruolo di visualizzazione di un elemento possa influire sul layout.
Prendiamo ad esempio il seguente codice:
<div id="navigazione">
<a href="#">Home</a>
<a href="#">Prodotti</a>
<a href="#">Contatti</a>
</div>
Questa sorta di menu verrà visualizzata nei browser come un susseguirsi di link, per renderizzarli come elementi di blocco basterebbe assegnare alle ancore del div navigazione la proprietà “display:block” la quale le renderà elemento blocco.
Così facendo possiamo trattare questi elementi inline come se fossero dei div, con il vantaggio che l’intero riquadro elemento diventa parte del link. In questo modo se il puntatore del mouse dell’utente si sposta in qualsiasi punto del riquadro elemento, è possibile fare click sul link.
L’importante è ricordare che si sta modificando il ruolo di visualizzazione dell’elemento e non la sua natura intrinseca, quindi un elemento inline può discendere da un elemento blocco ma non è possibile il contrario. Per esempio un link può essere posizionato all’interno di un paragrafo ma non può essere circondato da esso.
Ecco l’esempio:
<a href="#"><p>Testo di prova</p></a>
Questa regola non è validata, perché come abbiamo appena descritto anche alterando il ruolo di visualizzazione non modifica la natura dell’elemento.
Dal laboratorio è tutto 
Alla prossima.
1 Commenti.