← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▸ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▼ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▸ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

▸ JavaScript: об'єкти та JSON

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▸ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▸ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

Блокова модель CSS

Box model: margin, padding, border

📖 Теорія

Блокова модель CSS (зсередини назовні):
1. content — реальний контент
2. padding — внутрішній відступ (між контентом і рамкою)
3. border — рамка
4. margin — зовнішній відступ (між елементами)

💡 Приклад коду

.box {
  width: 200px;
  height: 100px;
  padding: 20px;           /* всі 4 сторони */
  padding: 10px 20px;      /* top/bottom left/right */
  padding: 5px 10px 15px 20px; /* top right bottom left */
  border: 2px solid #333;
  border-radius: 8px;      /* заокруглення кутів */
  margin: 0 auto;          /* центрування блоку */
}

Важливо: за замовчуванням width не включає padding та border.

← Попередній урок Наступний урок →