CSS display — block, inline, inline-block, flex, grid і none

Властивість display вказує тип блока, який використовується для HTML-елемента.

У HTML тип блоку без задання виставляється браузером згідно із актуальною версією специфікації або його налаштувань. У XML значенням без задання для всіх елементів є inline.

Додатково до різних типу блоків, існує значення none, яке приховує елемент зі сторінки та прибирає його з потоку - так ніби його і не було.

Властивість display задається з використанням значень ключових слів. Значення ключових слів згруповані за шістьма категоріями:

• <display-outside>

• <display-inside>

• <display-listitem>

• <display-internal>

• <display-box>

• <display-legacy>

Зараз рекомендується задавати для властивості по одному ключовому слову, але у пізніших версіях специфікацій допускається можливість використання одночасно декількох значень для display. Але вона поки що не підтримується всіма браузерами.

правити

Загальний опис

правити

Нотатка

Значення inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row та table-row-group не підтримуються в IE7 і більш ранніх версіях. IE8 вимагає !DOCTYPE. IE9 підтримує вже ці значення.

автор: NagarD правити

Нотатка

Значення flex і inline-flex вимагає префікс для роботи в Safari. Для flex використовуйте display: -webkit-flex, для inline-flex використовуйте display: -webkit-inline-flex;

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

display: block | inline | inline-block | inline-table |inline-flex | flex | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group| initial| inherit;

Властивість display може отримувати 23 значень:

block

Елемент показується як блоковий. Вказавши це значення для елемента <span> - він почне вести себе як блоковий, тобто, його вміст буде завжди починатися з нового рядка.

автор: NagarD

правити

inline

Елемент відображається як рядковий (<span>). Значення inline скасовує особливість блокових елементів завжди починатися з нового рядка.

автор: NagarD

правити

inline-block

Це значення створює блоковий елемент, який поводить себе подібно рядковому елементу. Його внутрішня частина форматується як у блокового елемента, а сам елемент - як рядковий. Так себе поводить елемент <img>.

автор: NagarD

правити

inline-table

Визначає, що елемент є таблицею <table> , але при цьому таблиця поводить себе як рядковий елемент і обтікається іншими елементами.

автор: NagarD

правити

inline-flex

Елемент поводиться як рядковий і викладає вміст згідно флекс-моделі. З'явився тільки у CSS3.

автор: NagarD

правити

flex

Елемент поводиться як блоковий і викладає вміст згідно флекс-моделі

автор: NagarD

правити

list-item

Елемент поводить себе так само як елемент <li>.

автор: NagarD

правити

none

Приховує елемент. Макет формується, немов елемента і не було. Зробити видимим елемент можна за допомогою скриптів. При цьому відбувається переформатування даних на сторінці з урахуванням знову доданого елемента.

автор: NagarD

правити

run-in

Встановлює елемент як блоковий або рядковий залежно від контексту.

автор: NagarD

правити

table

Надає елементу елементу якостей таблиці <table>.

автор: NagarD

правити

table-caption

Задає заголовок таблиці подібно застосуванню <caption>

автор: NagarD

правити

table-cell

Вказує, що елемент являє собою елемент таблиці (<td> або <th>)

автор: NagarD

правити

table-column-group

Елемент поводить себе ніби він елемент <colgroup>.

автор: NagarD

правити

table-column

Елемент поводить себе ніби він елемент <col>.

автор: NagarD

правити

table-footer-group

Використовується для зберігання однієї або декількох рядків комірок, які відображаються в самому низу таблиці. За своєю дією схожий з роботою <tfoot>

автор: NagarD

правити

table-header-group

Елемент призначений для зберігання одного чи кількох рядків комірок, які представлені у верхній частині сторінки. За своєю дією схожий з роботою <thead>

автор: NagarD

правити

table-row

Елемент відображається як рядок таблиці <tr>

автор: NagarD

правити

table-row-group

Елемент аналогічний дії елемента <tbody>.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: NagarD

правити

grid

Елемент поводиться як блоковий елемент та розміщує свій вміст відповідно до моделі grid

автор: NagarD

правити

inline-grid

Елемент поводиться як рядковий та розміщує свій вміст відповідно до моделі grid.

автор: NagarD

правити

contents

Змушує контейнер зникати, роблячи дочірні елементи дочірніми елементами наступного рівня в DOM

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	4
none, inline, block	1.0	1.0	1.0	7.0	12.0	4.0
inline-block	1.0	3.0	1.0	7.0	12.0	5.5
inline-flex, flex	29.0	28.0	9.0	17.0	12.0	11.0
list-item	1.0	1.0	1.0	7.0	12.0	6.0
run-in	1.0	Не підтримується	1.0	7.0	12.0	8.0
inline-table	1.0	3.0	1.0	7.0	12.0	8.0
table-*	1.0	1.0	1.0	7.0	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
none, inline, block	1.0		1.0	1.0
inline-block	1.0		1.0	1.0
inline-flex, flex	4.4		28.0	9.2
list-item	1.0		1.0	1.0
run-in	1.0		Не підтримується	1.0
inline-table	1.0		1.0	1.0
table-*	1.0		1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p>Цей приклад показує як працює властивість <code>display</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити метод обобки переповнення контенту по вертикалі в блоці нижче.</p>

<div class="inputs">
  <input id="block" checked name="display" type="radio"/>
  <label for="block">block</label>
  <message for="block">Елемент показується як блоковий.</message>
  
  <input id="none" name="display" type="radio"/>
  <label for="none">none</label>
  <message for="none">Приховує елемент. Макет формується, немов елемента і не було.</message>
  
  <input id="inline" name="display" type="radio"/>
  <label for="inline">inline</label>
  <message for="inline">Елемент відображається як рядковий. Значення скасовує особливість блокових елементів завжди починатися з нового рядка.</message>
  
  <input id="inline-block" name="display" type="radio"/>
  <label for="inline-block">inline-block</label>
  <message for="inline-block">Це значення створює блоковий елемент, який поводить себе подібно рядковому елементу. Його внутрішня частина форматується як у блокового елемента, а сам елемент - як рядковий.</message>
</div>

<div class="wm">
  <p id="message">Елемент показується як блоковий.</p>
</div>

<hr>

<div id="box">
  <div class="child">block</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

#box {
  margin-top: 25px;
  line-height: 1.45;
  width: 400px;
  height: 150px;
  background-color: gold;
  padding: 4px;
}

.child {
  background-color: #222;
  color: #fff;
  font-weight: 700;
  padding: 16px;
  margin-top: 25px;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#box .child').forEach((n) => n.style.setProperty('display', this.id));
  document.querySelectorAll('#box .child').forEach((n) => n.innerHTML = this.id);

}));

<p>Значення(ключові слова) для властивості <code>display</code>, які найчастіше використовуються:</p>
<hr>
<select id="form">
  <option value="block">block</option>
  <option value="inline-block">inline-block</option>
  <option value="inline">inline</option>
  <option value="none">none</option>
</select>
<hr>

<div id="block">
  Тестовий блок
</div>

#block {
  font-family: monospace;
  background-color: #eee;
  border: 2px solid #666;
  padding: 16px;
  text-align: center;
  color: #222;
  margin-top: 36px;
}

var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      block.style.display = form.options[i].value;
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<p class="block">block</p>
<p class="inline-block">inline-block</p>
<p class="inline">inline</p>

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

p {
  padding: 16px;
  background-color: #eee;
  color: #222;
  font-family: monospace;
}

<p>display: none — блок зникає разом зі своїм місцем</p>
<div class="row">
  <div class="b">1</div>
  <div class="b none">2</div>
  <div class="b">3</div>
</div>

<p>visibility: hidden — місце лишається порожнім</p>
<div class="row">
  <div class="b">1</div>
  <div class="b invis">2</div>
  <div class="b">3</div>
</div>

<p>opacity: 0 — елемент на місці, просто невидимий</p>
<div class="row">
  <div class="b">1</div>
  <div class="b transp">2</div>
  <div class="b">3</div>
</div>

body {
  font-family: sans-serif;
  font-size: 15px;
  padding: 12px;
}

p {
  margin: 18px 0 6px;
  font-family: monospace;
  color: #444;
}

.row {
  display: flex;
  gap: 8px;
}

.b {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #4a6fa5;
  color: #fff;
  border-radius: 6px;
}

.none {
  display: none;
}

.invis {
  visibility: hidden;
}

.transp {
  opacity: 0;
}

<div class="info">
	<p>За допомогою властивості <code>display</code> ми можемо вказати тип блока, який використовується для елемента.</p>
	<p>Для темних блоків нижче, задано значення: <em>block</em>, <em>inline-block</em> й <em>none</em> (приховано) відповідно.</p>
</div>

<div class="wrapper">
	<div class="block one">
		<p class="child">block</p>
	</div>
	<div class="block two">
		<p class="child">inline-block</p>
	</div>
	<div class="block three">
		<p class="child">none</p>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 4px 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 31%;
	height: 125px;
	background-color: gold;
	font-size: 16px;
	padding: 2px;
}

.block .child {
	background-color: #222;
	color: #fff;
	padding: 4px 6px;
}

.block.one .child {
	display: block;
}

.block.two .child {
	display: inline-block;
}

.block.three .child {
	display: none;
}