Урок 143 із 239
60%
Відступи між рядковими елементами в CSS
Вивчаємо, звідки беруться проміжки між рядковими елементами та як ними керувати.
Відступи між рядковими елементами в CSS
Якщо розташувати кілька рядкових елементів поруч, між ними можуть з'явитися невеликі проміжки.
Ці проміжки не створює CSS. Вони є звичайними символами пробілу між тегами в HTML-коді.
<span>text</span>
<span>text</span>
<span>text</span>span {
border: 1px solid red;
}<span>text</span><span>text</span><span>text</span> ❗ Важливо:
Пробіли між рядковими елементами в HTML обробляються браузером як звичайний текстовий пробіл.
- Пробіли між тегами HTML створюють проміжки між inline-елементами.
- CSS не додає ці відступи автоматично.
- Видалення пробілів у HTML прибирає проміжки.
- Для точного керування розташуванням часто використовують flex або grid.
.container {
display: flex;
}📌 Завдання:
- №1. Створіть три елементи span.
- №2. Додайте їм границю.
- №3. Додайте пробіли між тегами та подивіться результат.
- №4. Видаліть пробіли між тегами та порівняйте результат.
💡 Показати підказку
Якщо між inline-елементами з'явився незрозумілий проміжок — перевірте HTML-код на пробіли та переноси рядків.
✅ Показати відповідь
<span>text</span><span>text</span><span>text</span>