Стилі display, visibility

Стиль display може змінити відображення блоку.

Як ми вже знаємо, теги діляться на блочні і строкові (а також табличні, які розглянемо пізніше).

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

<span style="display: block;"> - будь-який елемент перетворює на блочний, він набуває всіх властивостей блочних елементів, його ширина по замовчуванню стає 100%, можна застосовувати вертикальні паддінги і маргіни.

<p style="display: inline;"> - будь-який елемент перетворює на строковий, він набуває всіх властивостей строкових елементів, його розміри по замовчуванню визначається розмірами контенту (вмісту), вертикальні паддінги і маргіни будуть ігноруватися.

<div style="display: inline-block;"> - будь-який елемент буде поводитися як строковий, але всередині буде мов блочний - будуть працювати розміри, вертикальні паддінги, але вертикальні маргіни працювати не будуть.

Поексперементуйте у пісочниці: jsFiddle.

<h1 style="display: none;"> - приховує будь-який елемент, так, ніби ви його видалили.

<h1 style="visibility: hidden;"> - приховує будь-який елемент, але залишає виділене під нього місце.

<h1 style="visibility: visible;"> - робить видимим прихований попереднім способом елемент (значення по-замовчуванню).

Для приховування елементів зазвичай використовується стиль display: none;.

Не використовуйте стиль opacity: 0; для приховування елемента! Блок стає прозорим, але він продовжує залишатися на своєму місці, заважає розміщуватися іншим елементам.

До інших значень стиля display належать:

- елемент списка display: list-item;, цей стиль дозволяє використовувати маркери чи нумерацію ліворуч від кожного елемента списку;

- табличні значення display: table, table-row, table-cell; ми розглянемо під час вивчення таблиць;

- флекс-бокси мають значення display: flex, inline-flex;, застосовуються для гнучкого керування вигляду групи блоків;

- css-сітки - display: grid;.

Youtube: HTML Шорти - Як ховати (4:04).