Свойство CSS Display

ВdisplayСвойство объекта определяет, как он отображается браузером.

Это очень важное свойство, и, вероятно, оно имеет наибольшее количество значений, которые вы можете использовать.

Эти значения включают:

• block
• inline
• none
• contents
• flow
• flow-root
• table(и всеtable-*те)
• flex
• grid
• list-item
• inline-block
• inline-table
• inline-flex
• inline-grid
• inline-list-item

плюс другие, которые вы вряд ли будете использовать, напримерruby.

Выбор любого из них значительно изменит поведение браузера с элементом и его дочерними элементами.

В этом посте я проанализирую самые важные из них, о которых больше нигде не говорится:

• block
• inline
• inline-block
• none

Остальные я освещаю в отдельных сообщениях:

• tableвРуководство по таблицам
• flexвРуководство по Flexbox
• gridвРуководство по CSS Grid

inline

Inline - это отображаемое значение по умолчанию для каждого элемента в CSS.

Все теги HTML отображаются встроенными сразу после установки, за исключением некоторых элементов, таких какdiv,pиsection, которые заданы какblockагентом пользователя (браузером).

Встроенные элементы не имеют полей или отступов.

То же самое по высоте и ширине.

Тыможетдобавьте их, но внешний вид на странице не изменится - они рассчитываются и применяются браузером автоматически.

inline-block

Похожий наinline, но сinline-block widthиheightприменяются так, как вы указали.

block

Как уже упоминалось, обычно элементы отображаются встроенными, за исключением некоторых элементов, в том числе

• div
• p
• section
• ul

которые установлены какblockбраузером.

Сdisplay: block, элементы располагаются один за другим по вертикали, и каждый элемент занимает 100% страницы.

Значения, присвоенныеwidthиheightсвойства соблюдаются, если вы устанавливаете их вместе сmarginиpadding.

none

С помощьюdisplay: noneзаставляет элемент исчезнуть. Он все еще присутствует в HTML, но не отображается в браузере.

Больше руководств по css:

• Руководство по Flexbox
• Учебник по CSS Grid
• Переменные CSS (настраиваемые свойства)
• Введение в PostCSS
• Свойство поля CSS
• Как центрировать элемент с помощью CSS
• Системные шрифты CSS
• Как напечатать HTML со стилем
• Вводное руководство по переходам CSS
• Учебник по CSS-анимации
• Введение в CSS
• Руководство по CSS
• Как настроить Tailwind с PurgeCSS и PostCSS
• Шпаргалка по попутному ветру
• Как непрерывно вращать изображение с помощью CSS
• Как сделать таблицу адаптивной с помощью CSS
• Как отлаживать CSS путем деления пополам
• Селекторы CSS
• CSS-каскад
• Специфика CSS
• Селекторы атрибутов CSS
• Цвета CSS
• Единицы CSS
• URL-адрес CSS ()
• CSS Типографика
• Коробочная модель CSS
• Свойство CSS position
• CSS Media Queries и адаптивный дизайн
• Запросы функций CSS
• CSS преобразования
• Как стилизовать списки с помощью CSS
• Префиксы поставщиков CSS
• Наследование CSS
• Псевдоклассы CSS
• Псевдоэлементы CSS
• Стилизация HTML-таблиц с помощью CSS
• Свойство CSS Display
• Функция CSS calc ()
• CSS Границы
• Импорт файла CSS с помощью @import
• Обработка ошибок CSS
• CSS фильтры
• CSS Размер окна
• CSS-фоны
• Комментарии CSS
• CSS шрифты
• CSS Padding
• CSS свойство float и очистка
• CSS нормализация
• Свойство CSS z-index
• Как отключить выделение текста с помощью CSS
• Как разместить элемент в нижней части контейнера с помощью CSS
• Как инвертировать цвета с помощью CSS
• Адаптивные предварительные теги в CSS
• Адаптивные вставки видео YouTube
• Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
• Как выровнять центр в flexbox