Урок 142 із 239
59%
Кілька рядкових елементів поруч у CSS
Вивчаємо поведінку рядкових елементів та як вони автоматично розташовуються в один ряд.
Кілька рядкових елементів поруч у CSS
Рядкові елементи за замовчуванням розташовуються один за одним в одному рядку, якщо для них вистачає місця.
На відміну від блочних елементів, рядкові елементи не починають новий рядок.
<span>text</span>
<span>text</span>
<span>text</span>span {
border: 1px solid red;
} ❗ Важливо:
Рядкові елементи займають тільки ту ширину, яка потрібна їхньому вмісту.
- span — приклад рядкового елемента.
- Рядкові елементи розташовуються горизонтально.
- Вони не створюють новий рядок.
- Їхня ширина залежить від вмісту.
📌 Завдання:
- №1. Створіть три елементи span.
- №2. Додайте їм границю.
- №3. Додайте різний текст та перевірте розташування.
- №4. Порівняйте поведінку span і div.
💡 Показати підказку
Спробуйте додати width і height до span та перевірте, чи зміниться його розмір.
✅ Показати відповідь
span {
border: 1px solid red;
}