Розділ 2 · Завдання 7

Блок div, width, height

Порожній прямокутний контейнер — основа для карток, плашок, підложок.

Завдання

Додайте в style.css:

style.css

.card {
  width: 300px;
  height: 150px;
  background-color: #e0f0ff;
  border: 2px solid #0066cc;
  border-radius: 12px;
  padding: 20px;
}

І в styles-demo.html

Додайте:

styles-demo.html

<div class="card">
  <p>Це текст усередині блока-картки</p>
</div>

Як це читати

<div>...</div> — контейнер, всередину якого можна класти будь-що.

width — ширина, height — висота в пікселях. Все, що вже знаєш (background-color, border, padding) працює й тут.

Важливо знати

Якщо текст всередині <div> не влазить у задану висоту — він «вилізе» за межі блока, браузер не обрізає автоматично.

Порада

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

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща