Типи Елементів

Елементи можна класифікувати як inline або block елементи, і різниця полягає в їхній поведінці за замовчуванням.

• Inline елементи зазвичай не починаються з нового рядка і займають лише стільки ширини, скільки потрібно. Вони дозволяють іншим елементам розташовуватися поруч з ними на одному рядку.
• З іншого боку, block елементи зазвичай починаються з нового рядка і займають всю ширину свого контейнера. Вони створюють новий "блок" або "коробку" для вмісту.

Block елементи

Block елементи займають всю ширину батьківського контейнера і зазвичай починаються з нового рядка. Приклади блокових елементів включають <div>, <h1> до <h6>, <p>, <ul>, <ol>, <li> та багато інших. Ці елементи можуть мати властивості width, height, margin, padding і border, які можна налаштовувати за допомогою CSS.

Inline елементи

Inline елементи не починають новий рядок і займають лише ту ширину, яка необхідна для їхнього вмісту. Прикладами вбудованих елементів є <a>, <span>, <img>, <input> та деякі інші. На відміну від блокових елементів, вбудованим елементам не можна задати конкретні значення параметрів height, width, margin або padding за допомогою CSS. Однак, варто зазначити, що до вбудованих елементів можна застосувати border.

Inline-block елементи

На додаток до block і inline елементів, існує третя категорія, відома як inline-block елементи. Подібно до елементів inline, елементи inline-block не починають новий рядок і займають рівно стільки ширини, скільки потрібно для їхнього вмісту. Їхньою відмінністю є те, що вони можуть мати властивості height, width, margin, padding і border, які задаються за допомогою CSS. Прикладами елементів inline-block є <button>, <select> та <textarea>.