Tarefa

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

Questões a Considerar:

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

1. Como os elementos inline e de nível de bloco interagirão dentro de cada <div>?
   • Na primeira e na segunda <div>, o elemento <span> (inline) aparece antes do texto (de nível de bloco).
   • Na terceira <div>, o elemento <span> está no meio do texto (de nível de bloco).
2. Como a ordem dos elementos afetará o layout?
   • Na primeira <div>, o texto "This is a block-level element." provavelmente aparecerá abaixo do elemento inline devido ao comportamento padrão de nível de bloco do contêiner <div>.
   • Na segunda <div>, a ordem dos elementos é invertida, então o texto provavelmente aparecerá acima do elemento inline.
   • Na terceira <div>, o texto e o elemento inline estão intercalados, portanto o layout pode mostrar o texto e o elemento inline na sequência.
3. Qual será a hierarquia visual dos elementos inline e de nível 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 com base na ordem dos elementos dentro da <div>.