Tarefa

Examine o código HTML fornecido e preveja como a página será exibida no navegador. Existem três elementos <div>, cada um contendo uma combinação de um elemento inline e um elemento de bloco.

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

Perguntas para Considerar:

1. Como os elementos inline e de bloco irão interagir dentro de cada <div>?
2. Como a ordem dos elementos afetará o layout?
3. Qual será a hierarquia visual dos elementos inline e de bloco dentro de cada <div>?

1. Como os elementos inline e de bloco irão interagir dentro de cada <div>?
   • No primeiro e segundo <div>, o elemento <span> (inline) aparece antes do texto (de bloco);
   • No terceiro <div>, o elemento <span> está no meio do texto (de bloco).
2. Como a ordem dos elementos afetará o layout?
   • No primeiro <div>, o texto "This is a block-level element." provavelmente aparecerá abaixo do elemento inline devido ao comportamento padrão de bloco do contêiner <div>;
   • No segundo <div>, a ordem dos elementos é invertida, então o texto provavelmente aparecerá acima do elemento inline;
   • No terceiro <div>, o texto e o elemento inline estão intercalados, então o layout pode mostrar o texto e o elemento inline na sequência.
3. Qual será a hierarquia visual dos elementos inline e de bloco dentro de cada <div>?
   • O elemento inline (<span>) provavelmente aparecerá em linha com o texto em todos os casos, mas sua posição pode variar de acordo com a ordem dos elementos dentro do <div>.