Display HTML – це властивість, яка дозволяє визначити, як елемент відображатиметься на веб-сторінці. За допомогою цієї властивості можна контролювати розташування, розмір та поведінку елементів на сторінці.
Основне значення якості display – це block, inline і inline-block. Ці значення визначають, як оброблятиметься елемент і який матиме форматування.
Значення block дозволяє елементу займати всю доступну ширину сторінки. Цей тип елемента починається з нового рядка і займає всю ширину контейнера. Блокові елементи можуть містити інші блокові та малі елементи.
Значення inline дозволяє елементу бути частиною текстового потоку на сторінці. Ці елементи не починаються з нового рядка і займають стільки місця, скільки необхідно для відображення вмісту. Елементи з цим значенням не можуть містити інші блокові елементи, лише малі.
Значення inline-block комбінує властивості block і inline. Елементи з цим значенням займають стільки місця, скільки їм необхідно для відображення вмісту, при цьому починаються з нового рядка і можуть містити інші елементи.
| Тип значення | Опис |
|---|---|
| block | Елемент блоковий, що займає всю доступну по горизонталі ширину, можна задавати висоту та ширину у відсотках або пікселях |
| inline | Елемент малий, займає лише необхідну ширину, висоту, відступи та межі не застосовуються |
| inline-block | Комбінація властивостей inline та block, елемент має блоковий характер, але при цьому займає лише необхідну ширину |
| none | Елемент не відображається на сторінці, його місце займають сусідні елементи |
| table | Елемент відображається як таблиця, успадковує властивості таблиці |
| table-row | Елемент відображається як рядок таблиці |
| table-cell | Елемент відображається як комірка таблиці |
| flex | Елемент відображається як блок, але його розмір може змінюватись в залежності від контенту та батьківського контейнера |
| grid | Елемент відображається як сітка, що дозволяє керувати розташуванням та розмірами елементів усередині контейнера |
| inherit | Елемент успадковує значення властивості display від батьківського елемента |
Що означає display у HTML?
Властивість display визначає тип відображення елемента, як він відображатиметься на веб-сторінці: як блок, малий елемент або якимось іншим способом.
Що таке display?
display "показувати" від лат. displicare «розсіювати, розкидати») електронний пристрій, призначений для візуального відображення інформації.
Навіщо потрібен display в CSS?
Властивість display (CSS) визначає тип відображення (display type) елемента, що має дві основні властивості, що визначають генерацію боксів – зовнішній тип відображення визначає розташування боксу у схемі потоку (flow layout) та внутрішній тип відображення визначає розташування дочірніх елементів боксу (бокс – це …)