Строчні елементи

```html

Влад Мержевич

Строчні елементи на веб-сторінці - це ті, які є безпосередньою частиною іншого елемента, наприклад, текстового абзацу. До строчних елементів відносяться теги <span>, <a>, <q>, <code> та інші. Зазвичай вони використовуються для зміни вигляду тексту або його логічного виділення.

Різниця між блочними та строчними елементами полягає в наступному.

  • Строчні елементи можуть містити лише дані або інші строчні елементи, тоді як блочні можуть містити інші блочні елементи, строчні елементи або дані. Іншими словами, строчні елементи не можуть містити блочні елементи.
  • Блочні елементи завжди починаються з нового рядка, а строчні не акцентуються таким чином.
  • Блочні елементи займають увесь доступний простір ширини, наприклад, вікно браузера, а ширина строчних елементів дорівнює їх вмісту плюс значення відступів, полів та меж.

У прикладі 1 показане використання тега <span> для виділення окремих слів.

Результат прикладу показано нижче (рис. 1).

В даному прикладі тег <span> та стилі використовуються для виділення різними способами фрагментів тексту. Зокрема, виділення здійснюється за рахунок фонового кольору, рамки навколо тексту та зміни його кольору.

Строчні елементи можна перетворити на блочні за допомогою властивості display та її значення block. Також можливе і обернене дія через значення inline (приклад 2).

Результат прикладу представлено на рис. 2.

У даному прикладі зміна положення шару відбувається за рахунок встановлення відносинного позиціонування (властивість position зі значенням relative) з подальшим зсувом відносно початкового розташування. Для цього використовуються властивості left та top.

Результат прикладу показано на рис. 3.

У прикладі 3 можна зовсім відмовитися від додавання тега <div>, замінивши його тегом <span> і таким чином, повністю перейти на строчні елементи. Отриманий результат, звичайно, буде відрізнятися своїм виглядом, також доведеться трохи виправити стилі (приклад 4).

Результат прикладу показано нижче (рис. 4).

За рахунок того, що тег <span> не починається з нового рядка, малюнок та текст у даному прикладі знаходяться на одній лінії. Тому вертикального відступу під текстом, як у випадку попереднього прикладу, тут немає. Зате з'явився відступ зверху.

Резюме

Строчні елементи зручно використовувати для зміни виду і стилю тексту, зокрема, окремих символів і слів. Для цієї мети зазвичай застосовується універсальний тег <span>, який самостійно ніяк не модифікує вміст, але легко об'єднується зі стилями через класи або ідентифікатори. За рахунок чого за допомогою цього тега можна легко керувати видом і положенням окремих фрагментів тексту або малюнків.

Для верстки строчні елементи застосовуються рідше, ніж блочні елементи. Це пов'язано в основному з тим, що всередину строчних елементів не допускається вкладення контейнерів <div>, <p> та подібних широко поширених тегів. Тем не менш, блочні та строчні елементи успішно доповнюють один одного, оскільки дозволяють на всіх рівнях змінювати вигляд складових веб-сторінок.

``` SEO текст: "Навчання про строчні та блочні елементи на веб-сторінці. Розрізняйте їх та використовуйте для кращої верстки та стилю тексту. Дізнайтеся, як змінити положення елементів та накласти їх один на одного в HTML."

Часті запитання