Tâche

Examinez le code HTML fourni et prévoyez l'apparence de la page dans le navigateur. Il y a trois éléments <div>, chacun contenant une combinaison d'un élément en ligne et d'un élément de niveau bloc.

<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>

Questions à considérer

1. Comment les éléments en ligne et de niveau bloc interagiront-ils à l'intérieur de chaque <div> ?
2. Comment l'ordre des éléments affectera-t-il la mise en page ?
3. Quelle sera la hiérarchie visuelle des éléments en ligne et de niveau bloc dans chaque <div> ?

1. Comment les éléments en ligne et de niveau bloc interagiront-ils à l'intérieur de chaque <div> ?
   • Dans le premier et le deuxième <div>, l'élément <span> (en ligne) apparaît avant le texte (niveau bloc) ;
   • Dans le troisième <div>, l'élément <span> se trouve au milieu du texte (niveau bloc).
2. Comment l'ordre des éléments affectera-t-il la mise en page ?
   • Dans le premier <div>, le texte "This is a block-level element." apparaîtra probablement sous l'élément en ligne en raison du comportement par défaut du conteneur <div> ;
   • Dans le deuxième <div>, l'ordre des éléments est inversé, donc le texte apparaîtra probablement au-dessus de l'élément en ligne ;
   • Dans le troisième <div>, le texte et l'élément en ligne sont entremêlés, donc la mise en page affichera probablement le texte et l'élément en ligne dans l'ordre de la séquence.
3. Quelle sera la hiérarchie visuelle des éléments en ligne et de niveau bloc dans chaque <div> ?
   • L'élément en ligne (<span>) apparaîtra probablement en ligne avec le texte dans tous les cas, mais sa position peut varier selon l'ordre des éléments dans le <div>.