Свойство display в CSS

Свойство display в CSS

По умолчанию все элементы в HTML бывают блочными и строчными. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline-block (строчно-блочное отображение).

Значения свойства, которые встречаются в работе чаще всего:

none -  полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.

block - элемент ведёт себя как блочный.

inline-block - элемент ведёт себя снаружи как строчный, а внутри как блочный.

flex  -  элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами.

grid - элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки.

Остальные значения можно посмотреть в спецификации.


Share Tweet Send
0 Комментарии
Загрузка...
You've successfully subscribed to Pinta IT 🍺
Great! Next, complete checkout for full access to Pinta IT 🍺
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.