Урок 140 із 239
59%
← Назад

Кілька блочних елементів поруч у CSS

Вивчаємо стандартну поведінку блочних елементів та чому вони починаються з нового рядка.

Кілька блочних елементів поруч у CSS

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

Навіть якщо задати блоку невелику ширину, він все одно залишиться окремим блоком і наступний елемент буде розташований під ним.

<div>text</div>
<div>text</div>
<div>text</div>
div {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid red;
}
❗ Важливо:

Блочна поведінка є стандартною для елементів div, p, h1-h6, section та інших блокових тегів.

  • Блочні елементи починаються з нового рядка.
  • За замовчуванням займають всю доступну ширину.
  • Властивості width і height працюють для блоків.
  • Щоб розташувати блоки поруч, потрібно змінити їхню поведінку через CSS.
div {
  display: inline-block;
}
📌 Завдання:
  1. №1. Створіть три блоки div.
  2. №2. Задайте їм width, height та border.
  3. №3. Перевірте, як вони розташовуються на сторінці.
  4. №4. Додайте display: inline-block та порівняйте результат.
💡 Показати підказку

Спробуйте змінити display у блоку та подивіться, як зміниться його поведінка.

✅ Показати відповідь
div {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid red;
}