Завдання

Розгляньте наданий HTML-код і спрогнозуйте, як буде виглядати сторінка у браузері. Є три елементи <div>, кожен з яких містить комбінацію вбудованого елемента та блочного елемента.

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

Питання для розгляду:

1. Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного <div>?
2. Як порядок елементів вплине на макет?
3. Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного <div>?

1. Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного <div>?
   • У першому та другому <div> елемент <span> (вбудований) з'являється перед текстом (блочний).
   • У третьому <div> елемент <span> знаходиться посередині тексту (на рівні блоку).
2. Як порядок елементів вплине на макет?
   • У першому <div> текст "This is a block-level element.", швидше за все, з'явиться під вбудованим елементом через те, що за замовчуванням контейнер <div> працює як блочний.
   • У другому <div> порядок елементів змінено на протилежний, тому текст, швидше за все, з'явиться над вбудованим елементом.
   • У третьому <div> текст і вбудований елемент чергуються, тому в макеті текст і вбудований елемент можуть відображатися послідовно.
3. Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного <div>?
   • Інлайн-елемент (<span>), найімовірніше, відображатиметься в рядку з текстом у всіх випадках, але його позиція може змінюватися залежно від порядку елементів всередині <div>.