Чим блокові елементи відрізняються від рядкових (inline)?

#Основна відмінність:

Блокові елементи формують новий блок, займають усю доступну ширину і починаються з нового рядка. Рядкові елементи не починають новий рядок і займають лише потрібний їм простір за вмістом.

---

#Розгорнуте пояснення (чудово підходить для співбесіди)

#Блокові елементи (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).

---

#Табличне порівняння (дуже зручно для відповіді)

---

#Є проміжний тип: inline-block

Часто співрозмовник запитає про нього.

• Не переноситься на новий рядок
• Але width/height можна задавати
• Поводиться як гібрид блока і рядка

Приклад: <img>, <button>, <input>.

---

#Коротке визначення (якщо просять коротко)

Блокові елементи формують новий блок і займають усю доступну ширину. Рядкові розміщуються в рядку, займають лише розмір контенту, і до них не можна застосовувати width/height.