Свойство display

Одним из важнейший CSS-свойств является display. Оно позволяет переопределять тип отображения элемента, не изменяя семантику кода. Рассмотрим основные значения этого свойства:

1. none — скрывает элемент;
2. block — определяет элемент как "блочный", что означает, что элемент не обтекается другими объектами, а переносится на новую строку и заполняет её полностью. Следующий элемент будет отрисован под блочным элементом. Является стандартным значением элементов div, p, ul, article, section и других;
3. inline — определяет элемент как "строчный", что означает, что элемент ведёт себя как текст. Является стандартным значением элементов span, a, s, b и других;
4. inline-block — смесь строчного и блочного. Фактически, являясь блочным, элемент получает возможность обтекаться строчными элементами, как тег img;
5. flex — превращает элемент в flex-контейнер. Это означает, что внутренние элементы выстраиваются так, как мы зададим с помощью свойств flex, flex-direction, flex-wrap, align-items, justify-content и других. Более подробно о flex-контейнерах стоит прочитать тут: Выравнивание элементов в Flex контейнере ;
6. grid — превращает элемент в grid-контейнер. Гриды это новая технология построения сеток. При помощи свойств управления сетками, например, grid-template-columns, мы можем управлять отображением содержимого внутри грида. Более подробно о гридах можно почитать здесь: Основные понятия Grid Layout .