Tarea

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

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

Preguntas para considerar:

1. ¿Cómo interactuarán los elementos en línea y de 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 de nivel de bloque dentro de cada <div>?

1. ¿Cómo interactuarán los elementos en línea y de nivel de bloque dentro de cada <div>?
   • En el primer y segundo <div>, el elemento <span> (en línea) aparece antes del texto (de nivel de bloque);
   • En el tercer <div>, el elemento <span> está en medio del texto (de nivel de bloque).
2. ¿Cómo afectará el orden de los elementos al diseño?
   • En el primer <div>, el texto "This is a block-level element." probablemente aparecerá debajo del elemento en línea debido al comportamiento predeterminado de nivel de bloque del contenedor <div>;
   • En el segundo <div>, el orden de los elementos está invertido, por lo que el texto probablemente aparecerá encima del elemento en línea;
   • En el tercer <div>, el texto y el elemento en línea están intercalados, por lo que el diseño podría mostrar el texto y el elemento en línea en secuencia.
3. ¿Cuál será la jerarquía visual de los elementos en línea y de nivel de bloque dentro de cada <div>?
   • El elemento en línea (<span>) probablemente aparecerá en línea con el texto en todos los casos, pero su posición puede variar según el orden de los elementos dentro del <div>.