Зачем нужно свойство display в CSS
- 1 сентября 2022
Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display
.
Тип отображения может влиять сразу на две вещи: на расположение самого бокса в потоке и на расположение дочерних элементов внутри бокса.
Например, у элемента <li>
тип бокса по умолчанию — display: block
. Это означает, что элементы списка отображаются один под другим на странице. Если изменить тип отображения на <inline>
, элементы списка будут отображаться рядом друг с другом, как будто это слова в предложении.
Тот факт, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.
Рассмотрим четыре основных типа боксов:
- блочные,
display: block
, - строчные,
display: inline
, - блочно-строчные,
display: inline-block
, - гибкие или флексовые (флексы),
display: flex
.
Блочный бокс
Блочный бокс — это прямоугольная область на странице, просто прямоугольник. По умолчанию блочным боксом обладают крупные поточные элементы, которые не являются фразовыми. Например, элементами с блочными боксами по умолчанию являются: <div>
, <header>
, <footer>
, <section>
, <h1>…<h6>
, <p>
, <ul>
, <ol>
, <li>
.
Особенности блочных боксов
До и после блочного бокса есть принудительный перенос строки. На одной строке с таким боксом не может находиться никакой другой элемент. Даже если блочный бокс почти не содержит контента или занимает лишь маленькую часть строки — он всё равно на строке один.
На блочные боксы действуют все свойства блочной модели (width
, height
, margin
, padding
).
Блочный бокс по умолчанию тянется на всю ширину родительского элемента.
По высоте блочный бокс ужимается под содержимое.
Пример поведения
Внутри <body>
есть четыре тега, и все эти теги являются блочными.

Хорошо видно, что строки текста внутри <h2>
очень короткие, и можно было бы эти элементы ужать под текст. Но заголовки тянутся на всю ширину и занимают всю доступную в родителе ширину, за исключением внутренних отступов.
Также очевидно, что если бы заголовки ужались под контент, то они поместились бы на одну строку. Но каждый занимает отдельную строку.
Строчный бокс
Строчный бокс — это фрагмент текста, который может разрываться и находиться на нескольких строках.
Элементы, боксы которых по умолчанию являются строчными, это теги, с помощью которых размечают небольшие куски текста, словосочетания: <a>
, <span>
, <button>
, <strong>
, <em>
, <i>
, <b>
, <time>
.
Отличия строчных и блочных боксов
У строчных боксов несколько отличий от блочных:
- Строчные боксы ведут себя как текст, то есть могут располагаться и на одной строке, и на нескольких. Если такой бокс не помещается на одной строке, то он спокойно переносится на следующую.
- Строчные боксы плохо взаимодействуют со свойствами блочной модели. Некоторые свойства на них просто не действуют, а некоторые — действуют частично. Например, отступы в строчных боксах работают только в горизонтальном направлении.
- Размеры строчных боксов всегда зависят от содержания.
Пример поведения
Посмотрите, как ведёт себя строчный бокс, если он не помещается в строке.

Строчные боксы
Строчные боксы — это не только теги <em>
и <span>
, но и обычный текст, который не обёрнут во фразовый тег. Такие фрагменты текста оборачиваются в анонимный строчный бокс. Анонимных боксов в рассмотренном примере три (это участки между явными строчными боксами, которые принадлежат тегам).
Блочный бокс — это прямоугольный статичный «кирпич», а строчный бокс — это что-то гибкое и текучее внутри этого «кирпича».
Блочно-строчный бокс
Блочно-строчные боксы сочетают в себе особенности и блочных боксов, и строчных боксов. Этот тип боксов используется для стилизации мелких интерфейсных элементов и элементов текстового содержания.
Флексбокс
Флексы — основной инструмент построения крупных сеток и микросеток.
Есть несколько особенностей, которые следует помнить и учитывать при использовании флексов:
- Все блоки очень легко делаются «резиновыми», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
- Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
- Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
- Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
- Множество языков в мире используют написание справа налево
rtl
(right-to-left), в отличии от привычного намltr
(left-to-right). Флекс адаптирован для этого. В нем есть «начало» и «конец», а не «право» и «лево». В браузерах с локальюrtl
все элементы будут автоматически расположены в обратном порядке. - Синтаксис CSS-правил очень прост и осваивается довольно быстро.
При этом есть вещи, которые не стоит забывать при использовании флексбокса:
- Не используйте флексы там, где в этом нет необходимости.
- Разберитесь с флексбоксом и знайте его основы. Так намного легче достичь желаемого результата. К примеру, по умолчанию флекс-элементы вытягиваются по поперечной оси и установленное значение высоты для элемента никак не учитывается.
- Не забывайте про
margin
. Они учитываются при установке выравнивания по осям. Важно помнить, чтоmargin
во флексбоксе не «схлопываются», как это происходит в обычном потоке. - Значение
float
у флекс-блоков не учитывается и не имеет значения.
Еще о флексбоксах
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Как работает ::first-line — оформление первой строки текста в CSS
Псевдоэлемент ::first-line
позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.
Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29
Как использовать: first-line
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Псевдоэлемент добавляется к селектору через ::
, и внутри блока задаются стили, которые применятся только к первой строке, как она отображается в браузере:
p::first-line {
font-weight: bold;
color: red;
}
Этот стиль сделает только первую строку текста в каждом абзаце <p>
красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.
Какие свойства работают
Псевдоэлемент ::first-line
не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:
Поддерживаются:
color
font
и его производные (font-size
,font-weight
,font-style
,font-variant
)letter-spacing
,word-spacing
line-height
text-decoration
text-transform
vertical-align
background
margin-left
иmargin-right
padding-left
иpadding-right
border-left
иborder-right
Не поддерживаются:
display
,position
,transform
,width
,height
и другие «структурные» свойства.
Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.
Пример с цитатой
<blockquote>
Когда вы начнёте, главное — не останавливаться.
</blockquote>
blockquote::first-line {
text-transform: uppercase;
letter-spacing: 2px;
}
Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.
Советы по использованию
- Используйте
::first-line
для декоративных акцентов: начало статьи, цитаты, описание карточки. - Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
- Не используйте псевдоэлемент для логических операций — он только визуальный.
- Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.
Поддержка
Псевдоэлемент ::first-line
поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block
, inline-block
, inline
).
Заключение
::first-line
— это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 27 июля 2025

Как работает :not() в CSS — исключаем элементы из стилей правильно
Доступно в Baseline в статусе «Widely Available» с 2023-07-21
Псевдокласс :not()
позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.
- 20 июля 2025

Выбор цветов в CSS через hsl() и hsla()
CSS-функции hsl()
и hsla()
позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.
- 18 июля 2025

Как перекрыть один элемент другим. CSS-свойство z-index
Свойство z-index
в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index
, тем ближе к пользователю расположен элемент.
- 16 июля 2025

Единица измерения cap в CSS
С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap
. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em
или rem
, но и относительно визуальной высоты заглавных букв.
Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.
- 8 июля 2025

10 свойств в CSS о которых вы, вероятно, не знали
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>
, <color>
, <font-size>
и может быть, <flex>
. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
- 22 июня 2025

Округление в CSS с функцией round()
Функция round()
появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc()
или JavaScript.
- 22 июня 2025

focus-visible
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab
.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible
. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
- 21 июня 2025

CSS font-palette: управление цветами шрифтов
Свойство font-palette
позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color
уже не влияет.
В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.
Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)
Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.
- 18 июня 2025

Как анимировать CSS Grids без JavaScript
Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float
, flex
и position
. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns
и grid-template-rows
существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns
и grid-template-rows
вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents
. Просто работает.
- 1 июня 2025