Каково основное значение свойства display в CSS и как оно работает?

Свойство display определяет, как элемент будет отображаться в документе и как он будет взаимодействовать с другими элементами, участвуя в потоке верстки (layout flow). Оно задает тип блока форматирования элемента.

Основные значения:

• block: Элемент форматируется как блок. Занимает всю доступную ширину, начинается с новой строки, может иметь установленные размеры (width, height).
• inline: Элемент форматируется как строчный. Не начинает новую строку, занимает только необходимую ширину, не может иметь установленные размеры (width, height), вертикальные отступы (margin-top, margin-bottom) и внутренние отступы (padding-top, padding-bottom) не влияют на окружающие элементы.
• inline-block: Элемент форматируется как строчный, но ведет себя как блок внутри строки. Не начинает новую строку, может иметь установленные размеры (width, height), а также вертикальные отступы и внутренние отступы, влияющие на окружающие элементы.
• none: Элемент и его контент не отображаются. Элемент полностью удаляется из потока документа, не занимает место.
• flex: Элемент становится Flex-контейнером, а его прямые потомки