Ми з вами вже знаємо, що всі елементи на веб-сторінці є блоки.
Але, для того, щоб було можливо гнучко управляти візуальним відображенням цих блоків, використовується кілька їх різновидів.
У кожного виду блоків є свої характеристики.
За вибір виду, в якому буде відображатися блок, відповідає властивість display.
Є 2 основні групи елементів, які можуть відображатися на веб-сторінках:
1) Малі елементи
2) Блокові елементи
Всі інші значення властивості display, задають елементу характеристики малих, блокових елементів або табличних елементів, в залежності від тих умов, в яких вони використовуються.
Якщо елемент не повинен відображатися на сторінці, то властивість display буде приймати значення none.
Кожне з цих властивостей, має сенс розглядати окремо, для того, щоб розібратися з тими характеристиками, які вони купують. Це ми і зробимо в наступних замітках.
Зараз лише хочу показати, як працює властивість display із значенням none.
Абзац 2 просто перестає відображатися на сторінці. Сторінка виводиться, как-будто його і немає.
Коли ви явно не задаєте властивість display елементу, все одно це властивість присвоюється йому за умовчанням браузером.
Значення за замовчуванням, яке буде застосовуватися для елементів це
Але є кілька елементів, які, як правило, в браузерах представляються в блоковому поданні.
Є ще кілька винятків із правила:
У специфікації про це написано тут:
Зверніть увагу, що елемента img тут немає, він, за замовчуванням, відображається як рядковий елемент. Це не завжди відразу очевидно. Коли я про це дізнався, для мене це було несподівано.
Поки на цьому все. Про решту значеннях і видах елементів поговоримо в наступних замітках.