Властивість рендеринг CSS

Властивість display у CSS контролює, як елемент відображається на сторінці. Вона визначає, чи буде елемент блочним, інлайновим чи елементом з іншим типом рендеринг.

Основні значення для пропси Display

Значення	Опис	Приклад
`block`	Елемент займає всю доступну ширину, починаючи з нового рядка. Зазвичай використовується для контейнерів, заголовків, абзаців тощо.	`<div>`, `<p>`, `<h1>`
`inline`	Елемент займає лише необхідну ширину і не викликає переривання рядка.	`<span>`, `<a>`, `<strong>`
`inline-block`	Елемент поводиться як інлайновий, але дозволяє встановлювати розміри (ширину та висоту).	`<img>`, `<button>`
`none`	Елемент не відображається і не займає місця в документі. Усі його пропси, включаючи розміри та позиціонування, ігноруються.	`<div style="display: none;">`
`flex`	Елемент стає флекс-контейнером, всередині якого його дочірні елементи стають флекс-елементами (дозволяє створювати гнучкі макети).	`<div style="display: flex;">`
`grid`	Елемент стає грід-контейнером, а його дочірні елементи стають клітинками цього гріда.	`<div style="display: grid;">`
`table`	Елемент поводиться як таблиця, подібно до елемента `<table>`.	`<div style="display: table;">`
`list-item`	Елемент поводиться як елемент списку, подібно до `<li>`.	`<div style="display: list-item;">`
`run-in`	Цей режим рідко використовується. Спочатку елемент поводиться як блочний, а потім, якщо можливо, стає інлайновим.	`<div style="display: run-in;">`
`inherit`	Значення `display` успадковується від батьківського елемента.	`<div style="display: inherit;">`
`unset`	Якщо властивість `display` встановлена на елементі, вона скидається, і елемент повертається до свого початкового значення.	`<div style="display: unset;">`

Коли використовувати кожне значення

block — використовуйте для елементів, які повинні займати всю ширину батьківського контейнера, наприклад, для контейнерів і секцій.
inline — використовуйте для елементів, які повинні бути розміщені в ряд з іншими елементами, наприклад, для посилань або тексту.
inline-block — корисно для створення елементів, які повинні бути розміщені в ряд, але мають можливість встановлювати розміри.
none — використовуйте, щоб приховати елементи, коли потрібно повністю видалити їх з потоку документа.
flex — використовуйте для створення гнучких, адаптивних макетів, де дочірні елементи можуть змінювати свій розмір залежно від доступного місця.
grid — використовуйте для створення двомірних макетів з точним позиціонуванням елементів у гриді.
table — використовуйте для створення таблиць, де елементи повинні поводитися як рядки та клітинки таблиці.
list-item — використовуйте для елементів, які повинні поводитися як елементи списку, наприклад, <ul> та <ol>.
run-in — рідко використовується, але корисно для створення елементів, які спочатку поводяться як блочні елементи, а потім стають інлайновими.

Приклад використання

css

/* Flex container */
.container {
  display: flex;
  justify-content: space-between;
}

/* Grid element */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Hiding element */
.hidden {
  display: none;
}

Особливості використання display: none:

Коли ви використовуєте display: none, елемент не тільки прихований, але й не займає місця в потоці документа. Якщо вам потрібно приховати елемент, але зберегти його місце, використовуйте visibility: hidden.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Властивість рендеринг CSS

#Основні значення для пропси Display

#Коли використовувати кожне значення

#Приклад використання

Коротка відповідь

Основні значення для пропси Display

Коли використовувати кожне значення

Приклад використання