Властивість Display: Block, Inline та Inline-Block

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

Блокові елементи

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

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

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

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

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

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

• Залишаються інлайновими, як текст;
• Підтримують ширину, висоту, відступи, поля та рамку, як блокові елементи.

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

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

Основні відмінності