Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим блокові елементи відрізняються від рядкових (inline)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Блокові елементи** формують новий блок, займають усю доступну ширину і починаються з нового рядка; **рядкові (inline)** елементи не починають новий рядок і займають лише потрібний їм простір за вмістом. **Ключове:** до рядкових елементів не можна застосовувати width/height, на відміну від блокових.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення#### **Основна відмінність:** Блокові елементи формують **новий блок**, займають усю доступну ширину і починаються з нового рядка. Рядкові елементи **не починають новий рядок** і займають лише потрібний їм простір за вмістом. --- ## Розгорнуте пояснення (чудово підходить для співбесіди) ### **Блокові елементи (block)** - Завжди починаються з нового рядка - Займають **усю ширину батька** типово - Можна задавати: - ширину (`width`) - висоту (`height`) - зовнішні відступи (`margin`) - внутрішні відступи (`padding`) - межі (`border`) - Поводяться як прямокутні блоки в потоці документа - Часто є структурними елементами **Приклади блокових елементів:** `<div>`, `<p>`, `<section>`, `<article>`, `<header>`, `<footer>`, `<h1>`-`<h6>`. --- ### **Рядкові елементи (inline)** - **Не починають новий рядок**: розташовуються «в рядку» - Ширина залежить лише від контенту - **Не можна** задати: - ширину - висоту - Відступи працюють обмежено: - вертикальний `margin` **не впливає** на потік - вертикальні `padding` і `border` **не зсувають сусідні елементи**, а просто «виступають» усередині рядка - Використовуються для виділення тексту або дрібних елементів **Приклади рядкових елементів:** `<span>`, `<a>`, `<strong>`, `<em>`, `<label>`, `<img>` (частково inline-block). --- ## Табличне порівняння (дуже зручно для відповіді) | Властивість | Block | Inline | |---|---|---| | Починає новий рядок | Так | Ні | | Займає всю ширину | Так | Ні | | Width/height працюють | Так | Ні | | Margin/padding з усіх боків | Так | Частково | | Використовується для структури | Так | Ні | | Використовується всередині тексту | Ні | Так | --- ## **Є проміжний тип: inline-block** Часто співрозмовник запитає про нього. - Не переноситься на новий рядок - Але width/height можна задавати - Поводиться як гібрид блока і рядка Приклад: `<img>`, `<button>`, `<input>`. --- ## Коротке визначення (якщо просять коротко) > Блокові елементи формують новий блок і займають усю доступну ширину. > Рядкові розміщуються в рядку, займають лише розмір контенту, і до них не можна застосовувати width/height.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.