Свойство display определяет, как элемент будет отображаться в документе и как он будет взаимодействовать с другими элементами, участвуя в потоке верстки (layout flow). Оно задает тип блока форматирования элемента.
Основные значения:
block: Элемент форматируется как блок. Занимает всю доступную ширину, начинается с новой строки, может иметь установленные размеры (width, height).inline: Элемент форматируется как строчный. Не начинает новую строку, занимает только необходимую ширину, не может иметь установленные размеры (width, height), вертикальные отступы (margin-top, margin-bottom) и внутренние отступы (padding-top, padding-bottom) не влияют на окружающие элементы.inline-block: Элемент форматируется как строчный, но ведет себя как блок внутри строки. Не начинает новую строку, может иметь установленные размеры (width, height), а также вертикальные отступы и внутренние отступы, влияющие на окружающие элементы.none: Элемент и его контент не отображаются. Элемент полностью удаляется из потока документа, не занимает место.flex: Элемент становится Flex-контейнером, а его прямые потомки — Flex-элементами. Используется для создания гибких макетов.grid: Элемент становится Grid-контейнером. Используется для создания макетов на основе сетки.Как работает:
Браузер использует значение display для определения типа форматирующего контекста, в котором находится элемент. Это влияет на:
Пример:
css