По умолчанию все элементы в HTML бывают блочными и строчными. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.
Тут на помощь приходит свойство display ✨
Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline-block (строчно-блочное отображение).
Значения свойства, которые встречаются в работе чаще всего:
none - полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
block - элемент ведёт себя как блочный.
inline-block - элемент ведёт себя снаружи как строчный, а внутри как блочный.
flex - элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами.
grid - элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки.
Остальные значения можно посмотреть в спецификации.
