Compito

Esaminare il codice HTML fornito e prevedere come apparirà la pagina nel browser. Sono presenti tre elementi <div>, ciascuno contenente una combinazione di un elemento inline e uno a livello di blocco.

<div>
  <span>This is an inline element</span>
  This is a block-level element.
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
  This is another block-level element.
</div>

Domande da considerare:

1. Come interagiranno gli elementi inline e quelli a livello di blocco all'interno di ciascun <div>?
2. In che modo l'ordine degli elementi influenzerà il layout?
3. Quale sarà la gerarchia visiva degli elementi inline e a livello di blocco all'interno di ciascun <div>?

1. Come interagiranno gli elementi inline e quelli a livello di blocco all'interno di ciascun <div>?
   • Nel primo e nel secondo <div>, l'elemento <span> (inline) appare prima del testo (a livello di blocco);
   • Nel terzo <div>, l'elemento <span> si trova nel mezzo del testo (a livello di blocco).
2. In che modo l'ordine degli elementi influenzerà il layout?
   • Nel primo <div>, il testo "This is a block-level element." probabilmente apparirà sotto l'elemento inline a causa del comportamento predefinito a livello di blocco del contenitore <div>;
   • Nel secondo <div>, l'ordine degli elementi è invertito, quindi il testo probabilmente apparirà sopra l'elemento inline;
   • Nel terzo <div>, il testo e l'elemento inline sono alternati, quindi il layout potrebbe mostrare il testo e l'elemento inline in sequenza.
3. Quale sarà la gerarchia visiva degli elementi inline e a livello di blocco all'interno di ciascun <div>?
   • L'elemento inline (<span>) probabilmente apparirà in linea con il testo in tutti i casi, ma la sua posizione potrebbe variare in base all'ordine degli elementi all'interno del <div>.