Summary  
This chapter explains how display types—block, inline, and inline-block—govern element layout behaviors (line breaking and width) and which CSS properties (like width, height, margin, and padding) can be applied.  

General domain of usage  
Web development

HTML-елементи поводяться по-різному залежно від того, чи є вони **блочними**, **рядковими** або **рядково-блочними**. Ці типи відображення впливають на розміщення, відступи та доступні CSS-властивості.

## Блочні елементи 
- Починаються з **нового рядка**;
- Займають **повну ширину** свого контейнера;
- Підтримують властивості width, height, margin, padding та border.

Поширені приклади: `<div>`, `<p>`, `<ul>`, `<li>`, `<h1>–<h6>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxvbD4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgICA8bGk+PHA+TG9yZW0gaXBzdW08L3A+PC9saT4KICAgICAgPGxpPjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvcD48L2xpPgogICAgPC9vbD4KICAgIDx1bD4KICAgICAgPGxpPjxoND5Mb3JlbSwgaXBzdW0uPC9oND48L2xpPgogICAgICA8bGk+PGg0PkxvcmVtLCBpcHN1bSBkb2xvci48L2g0PjwvbGk+CiAgICAgIDxsaT48aDQ+TG9yZW0sIGlwc3VtIGRvbG9yLjwvaDQ+PC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

aDQgewogIHBhZGRpbmc6IDEycHg7Cn0KCnAgewogIGJvcmRlcjogMXB4IHNvbGlkIHRhbjsKfQ==

## Інлайнові елементи
- Залишаються **на одному рядку**;
- Займають лише **простір, необхідний для їхнього вмісту**;
- Неможливо задати ширину або висоту (але рамка працює).

Поширені приклади: `<a>`, `<span>`, `<img>`, `<input>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIC8+CiAgICA8c3Bhbj5Mb3JlbSwgaXBzdW0gZG9sb3IuPC9zcGFuPgogICAgPGEgaHJlZj0iIyI+TG9yZW0sIGlwc3VtLjwvYT4KICAgIDxzcGFuPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyLjwvc3Bhbj4KICA8L2JvZHk+CjwvaHRtbD4=

c3BhbiB7CiAgYm9yZGVyOiAycHggc29saWQgd2hlYXQ7Cn0=

## Інлайново-блокові елементи
- Розташовуються **інлайново**, як текст;
- Підтримують **ширину**, **висоту**, **відступи (margin)**, **внутрішні відступи (padding)** та **рамку**, як блокові елементи.

Приклади: `<button>`, `<select>`, `<textarea>`.

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ic2VuZC1idG4iPlNlbmQgcmVxdWVzdDwvYnV0dG9uPgogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGNsYXNzPSJzdWJtaXQtYnRuIj5TdWJtaXQgZm9ybTwvYnV0dG9uPgogIDwvYm9keT4KPC9odG1sPg==

LyogU2V0IGNvbW1vbiBzdHlsZXMgZm9yIGFsbCBidXR0b24gZWxlbWVudHMgKi8KYnV0dG9uIHsKICBjdXJzb3I6IHBvaW50ZXI7Cn0KCi5zZW5kLWJ0biB7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIGJhY2tncm91bmQtY29sb3I6IHllbGxvd2dyZWVuOwogIGNvbG9yOiBzbGF0ZWJsdWU7CiAgZm9udC1zaXplOiAyNHB4Owp9Cgouc3VibWl0LWJ0biB7CiAgcGFkZGluZzogNXB4IDE4cHg7CiAgYm9yZGVyOiAxcHggc29saWQgYnJvd247CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQ==

Яка основна відмінність між блочними та рядковими елементами?

Який із наведених є прикладом блочного елемента?

Опануйте основи CSS (Cascading Style Sheets) — мови стилізації, що визначає зовнішній вигляд вебсторінок. Досліджуйте ключові поняття, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Формуйте навички створення візуально привабливих і структурованих вебсторінок. Ідеально підходить для початківців, які прагнуть закласти міцну базу в CSS.

Дізнайтеся, що таке CSS, як підключити його до HTML і як стилізувати елементи HTML за допомогою селекторів. Ознайомтеся з базовими поняттями, такими як кольори тексту, псевдокласи дій користувача та змінні в CSS.

Дізнайтеся, як стилізувати та форматувати текст на вебсторінках. Ознайомтеся із застосуванням користувацьких шрифтів і різноманітних властивостей шрифтів для покращення вигляду тексту.

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

Ознайомлення з Flexbox — потужним методом розміщення елементів у CSS для організації рядків і стовпців. Вивчення керування напрямком, вирівнюванням і відстанями між елементами по горизонталі та вертикалі, а також налаштування окремих flex-елементів для точного макетування.

Дізнайтеся, як підвищити візуальну привабливість веб-сторінок за допомогою CSS. Ознайомтеся з техніками застосування кольорів і зображень фону, стилізації зображень, використання декоративних псевдоелементів і додавання тіней для створення ефектних дизайнів.

Розуміння Блокових, Рядкових і Рядково-Блокових Елементів

Блочні елементи

Інлайнові елементи

Інлайново-блокові елементи

1. Яка основна відмінність між блочними та рядковими елементами?

2. Який із наведених є прикладом блочного елемента?