Css display (block, inline, none)
Властивість CSS Display потрібен для установки типу html елемента щодо інших елементів. Простіше кажучи це опція відповідає за те, як відображати елемент щодо інших. Завдяки йому можна домагатися потрібних "спецефектів".
Синтаксис CSS Display
Де value може приймати значення:
- block - блоковий елемент (автоматично створює новий рядок)
- inline - вбудований елемент (не створює перекладу рядка);
- inline-block - похідна від inline. Він також не створює перекладу рядка, але елементу можна задати ширину і висоту;
- list-item - блоковий елемент з маркером списку;
- run-in - встановлює елемент як блоковий або вбудований в залежності від контексту;
- table - рівносильно таблиці (тег
), З переносом рядка;
- inline-table - похідна від table. Елемент є вбудованим, але сусідні елементи його обтікають;
- table-caption - створення заголовка таблиці (аналог тега
); - table-cell - створення елемента елементи таблиці (аналог тега
); - table-column - елемент визначає стовпець таблиці;
- table-row - елемент визначає рядок таблиці;
- none - елемент не відображається на сторінці і всі інші елементи поводяться так, як ніби його немає взагалі;
- inherit - успадкування від елемента з батьків;
Примітка
За замовчуванням всі елементи є малими display. inlineПриклади використання Display
Приклад №1. Використання display: block
У прикладі додано властивість border: 1px solid # 000 щоб показати, яку область займає блоковий елемент.
Ось як це виглядає на сторінці:
Абзац №1. Розглядаємо елементи display. текст з властивістю display: block Як бачите, рядок перенеслася автоматично
Приклад №2. Використання display: none
Ось як це виглядає на сторінці:
Абзац №1. Розглядаємо елементи display: none. текст з властивістю display: none Як бачите, блок з текстом none відсутня
Логічно провести асоціацію з атрибутом visibility: hidden. але на відміну від нього, display: none не зводить місця під об'єкти.
Ця властивість є дуже корисним, наприклад, при створенні ефектів меню, що випадає.
Приклад №3. Використання display: inline-block
Ось як це виглядає на сторінці:
Абзац №1. Розглядаємо елементи. текст з властивістю display: inline-block Як бачите, блок вставлений прямо в контент