👋 Привіт! У цьому матеріалі зібрано поширені особливості застосування рядкових (inline) HTML-елементів у сучасній верстці сайтів з урахуванням актуальних стандартів W3C та WHATWG.
🔤 Основні рядкові елементи сторінки сайту
Рядкові елементи призначені для оформлення фрагментів тексту, створення посилань та інтерактивних елементів без порушення основного потоку документа.
| HTML-тег | Значення |
|---|---|
<a> | гіперпосилання для переходу на інші ресурси або внутрішні анкори |
<abbr> | абревіатура або скорочення (розшифровка додається через атрибут title) |
<b> | стилістичне виділення тексту напівжирним без надання додаткової семантичної важливості |
<bdo> | перевизначення напрямку відображення тексту (Bidirectional Text Override) |
<br> | примусовий перенос рядка всередині тексту |
<button> | інтерактивна кнопка (рядково-блоковий елемент за замовчуванням) |
<cite> | посилання на джерело, назву твору, книги чи статті |
<code> | фрагмент комп'ютерного коду |
<dfn> | виділення терміну, що визначається в тексті |
<em> | акцентований текст (семантичний наголос, за замовчуванням відображається курсивом) |
<i> | текст, виділений особливим голосом або інтонацією (наприклад, технічні терміни, іноземні слова, іконки) |
<img> | зображення (за специфікацією заміщуваний inline-елемент) |
<input> | поле введення даних форми (за замовчуванням inline-block) |
<kbd> | позначення тексту, що вводиться користувачем з клавіатури |
<label> | текстовий підпис для елемента форми |
<q> | коротка внутрішньорядкова цитата (браузери зазвичай додають лапки автоматично) |
<s> | текст, що втратив актуальність (закреслений) |
<samp> | приклад виводу комп'ютерної програми або системи |
<select> | випадаючий список у формах (inline-block) |
<small> | текст "дрібного шрифту" (дисклеймери, копірайти, юридичні застереження) |
<span> | універсальний несемантичний контейнер для внутрішньорядкових елементів або фрагментів тексту |
<strong> | важливий текст (має високу семантичну значущість, за замовчуванням напівжирний) |
<sub> | нижній індекс (для хімічних формул, математичних виразів) |
<sup> | верхній індекс (для степенів, виносок) |
<teaxtarea> | багаторядкове поле введення тексту (inline-block) |
<u> | текст з візуальним підкресленням (наприклад, для позначення орфографічних помилок чи власних назв) |
<var> | математична або програмна змінна |
📏 Особливості роботи та застосування
Поведінка у потоці та займана ширина
Рядкові елементи не починаються з нового рядка. Вони займають лише той простір, який необхідний для відображення їхнього вмісту, та вибудовуються послідовно один за одним горизонтально, поки вистачає ширини батьківського контейнера.
Правила вкладеності (Важливе виключення HTML5)
За класичним правилом блокові елементи не можна розміщувати всередині рядкових. Проте сучасні стандарти HTML5 роблять виключення для тегу <a>: тег посилання може огортати цілі блокові елементи (наприклад, <div>, <article>), перетворюючись на контейнер для всього блоку.
📐 Відсутність прямого впливу width та height
На чисті рядкові елементи (display: inline) властивості width та heightне діють і браузером ігноруються. Розміри елемента визначаються виключно розміром його вмісту та параметрами line-height і font-size.
back to contents ↑Примітка щодо заміщуваних елементів (Replaced Elements): Для тегів
<img>,<input>,<button>,<textarea>та<select>властивостіwidthтаheightпрацюють, оскільки вони відносяться до заміщуваних елементів або мають за замовчуваннямdisplay: inline-block.
↕️ Відступи та межі (Padding, Margin, Border)
- Горизонтальні відступи:
margin-left,margin-right,padding-left,padding-rightта бічніborderпрацюють коректно і розсувають сусідні елементи в рядку. - Вертикальні відступи:
margin-topтаmargin-bottomповністю ігноруються. Властивостіpadding-top,padding-bottomта вертикальніborderвізуально додаються до елемента, але не впливають на висоту рядка та не розсувають сусідні елементи по вертикалі, перекриваючи сусідній текст.
🔤 Пробіли у вихідному коді (Inline Spacing)
У коді HTML будь-який перенос рядка або пробіл між рядковими елементами сприймається браузером як один реальний пробіл на екрані (шириною близько 4px залежно від шрифту).
- Щоб прибрати небажаний відступ між inline-елементами, у сучасному CSS використовують:
- Батьківський контейнер із
display: flexабоdisplay: grid. - Властивість
font-size: 0для батьківського елемента із відновленням шрифту для дочірніх.
- Батьківський контейнер із
- Щоб заборонити перенос тексту всередині рядкового елемента, застосовуйте CSS-властивість
white-space: nowrap.
