Урок 145 із 239
61%
← Назад

Робота з властивістю display у CSS

Вивчаємо властивість display, яка дозволяє змінювати тип відображення HTML-елементів: робити їх блочними або рядковими.

Робота з властивістю display у CSS

Кожен HTML-тег має свій стандартний тип відображення: блочний або рядковий.

За допомогою властивості display можна змінити поведінку елемента. Значення block робить елемент блочним, а значення inline — рядковим.

  • display: block — елемент починається з нового рядка та займає доступну ширину.
  • display: inline — елемент розташовується в одному рядку з іншими елементами.
<span>text</span>
<span>text</span>
<span>text</span>
span {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}
❗ Важливо:

Після зміни display елемент зберігає свій HTML-тег, але змінює поведінку у верстці.

📌 Завдання:
  1. №1. У HTML-коді є кілька абзаців p. Зробіть так, щоб вони поводилися як рядкові елементи.
  2. №2. У HTML-коді є кілька посилань a. Зробіть так, щоб вони поводилися як блочні елементи. Додайте їм границю, ширину та висоту.
p {
  display: inline;
}
a {
  display: block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}
💡 Показати підказку

Для зміни поведінки елементів використовуйте display: inline або display: block.

✅ Показати відповідь
/* №1 */
p {
  display: inline;
}

/* №2 */
a {
  display: block;
  width: 100px;
  height: 50px;
  border: 1px solid red;
}