Завдання

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

html

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

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