Tarea

Examine el código HTML proporcionado y prediga cómo se verá la página en el navegador. Hay tres elementos <div>, cada uno de los cuales contiene una combinación de un elemento en línea y otro a nivel de bloque.

Cuestiones a tener en cuenta:

1. ¿Cómo interactuarán los elementos en línea y a nivel de bloque dentro de cada <div>?
2. ¿Cómo afectará el orden de los elementos al diseño?
3. ¿Cuál será la jerarquía visual de los elementos en línea y a nivel de bloque dentro de cada <div>?

1. **¿Cómo interactúan los elementos inline y block-level dentro de cada <div>?
   • En el primer y segundo <div>, el elemento <span> (inline) aparece antes del texto (block-level).
   • En el tercer <div>, el elemento <span> está en medio del texto (block-level).
2. **¿Cómo afectará el orden de los elementos a la maquetación?
   • En el primer <div>, el texto "This is a block-level element." aparecerá probablemente debajo del elemento inline debido al comportamiento por defecto a nivel de bloque del contenedor <div>.
   • En el segundo <div>, el orden de los elementos se invierte, por lo que el texto aparecerá probablemente encima del elemento en línea.
   • En el tercer <div>, el texto y el elemento inline están intercalados, por lo que la maquetación podría mostrar el texto y el elemento inline en la secuencia.
3. **¿Cuál será la jerarquía visual de los elementos en línea y a nivel de bloque dentro de cada <div>?
   • Es probable que el elemento en línea (<span>) aparezca en línea con el texto en todos los casos, pero su posición podría variar en función del orden de los elementos dentro del <div>.