Зачем нужно свойство 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
у флекс-блоков не учитывается и не имеет значения.
Еще о флексбоксах
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Справочник по новым математическим функциям CSS
За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.
Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.
Статья дополняется.
- 28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться
Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll
, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.
Внимание! Все примеры в этой статье работают только в Chrome 116+.
- 27 апреля 2025

Анимация по любой траектории с offset-path
У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.
В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть.
- 18 апреля 2025

Автоматическая тёмная тема: новая CSS-функция light-dark()
CSS-функция light-dark()
облегчает жизнь при поддержке светлой и тёмной темы. Раньше, чтобы задать разные стили для разных тем, приходилось писать медиа-выражения вроде @media (prefers-color-scheme: dark)
и дублировать одни и те же куски стилей с поправками на цвет. Это работало, но выглядело избыточно и громоздко, особенно когда надо было поменять всего один цвет. Для системности создавались CSS-переменные — например, --text-color
, значение которой менялось внутри медиавыражения. Всё это работало, но напоминало церемонию ради церемонии.
С light-dark()
всё стало проще. Это функция, которая на лету подставляет значение в зависимости от активной темы. Если у пользователя включена светлая тема, функция вернёт первое значение. Если тёмная — второе. Пример: color: light-dark(black, white)
— в светлой теме будет чёрный текст, в тёмной — белый. Всё. Никаких переменных, никаких @media
. Просто одно свойство и два значения — читаемо, логично, компактно.
- 23 апреля 2024

Псевдокласс :link
Псевдокласс :link
в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.
Пример использования псевдокласса :link
для стилизации непосещенных ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
В данном примере для всех непосещенных ссылок устанавливается синий цвет (#007bff
) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных (:visited
) ссылок.
При работе с :link
, важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited
для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover
и :active
, чтобы обеспечить интерактивный и отзывчивый интерфейс.
Пример полного набора стилей для ссылок:
a:link {
color: #007bff;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:active {
color: #ff0000;
}
В этом примере задаются различные стили для всех возможных состояний ссылок: :link
для непосещённых, :visited
для посещённых, :hover
при наведении курсора и :active
в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.
- 4 апреля 2024

Селектор потомков (пробел)
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
Пример использования селектора потомков:
article p {
color: #333;
line-height: 1.6;
}
В данном примере все абзацы (<p>
), которые находятся внутри элемента <article>
, будут окрашены в темно-серый цвет и получат межстрочный интервал в полтора размера шрифта. Селектор потомков позволяет легко управлять стилем конкретных элементов, сохраняя при этом общую структуру и читаемость кода.
Селектор потомков особенно полезен в следующих случаях:
- Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
- Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
- Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.
Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.
Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.
- 4 апреля 2024

Псевдокласс :focus
Псевдокласс :focus
в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus
позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.
Пример использования :focus
:
input:focus {
border: 2px solid blue;
background-color: lightblue;
}
В этом примере для всех текстовых полей (input
) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.
Псевдокласс :focus
особенно важен для:
- Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
- Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
- Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.
Применение :focus
в сочетании с другими псевдоклассами, такими как :hover
и :active
, позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.
Однако, важно помнить, что стилизация элементов при помощи :focus
должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.
- 4 апреля 2024

Селектор по id
CSS-селектор по идентификатору (id
) позволяет стилизовать элементы веб-страницы, которые имеют уникальный идентификатор. Использование селектора по id
делает возможным точечное применение стилей к конкретному элементу, не затрагивая другие элементы на странице.
Селектор по id
обозначается знаком решетки (#
) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id
мощным инструментом для стилизации конкретных элементов.
Пример использования селектора по id
:
<div id="uniqueElement">Этот элемент уникален.</div>
#uniqueElement {
color: green;
font-size: 20px;
}
В этом примере элементу <div>
с id="uniqueElement"
присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.
Преимущества использования селектора по id
:
- Точечная стилизация: Селектор по
id
позволяет применять стили к конкретному элементу, не влияя на другие элементы. - Высокий приоритет: Стили, примененные через селектор по
id
, имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.
Важно помнить:
- Идентификатор должен быть уникальным в пределах всего HTML-документа.
- Злоупотребление селекторами по
id
может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно. - Селекторы по
id
могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.
Использование селектора по id
является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.
- 4 апреля 2024

Несколько селекторов через запятую
Список селекторов в CSS представляет собой перечень селекторов, разделенных запятыми, что позволяет применить один и тот же набор стилей к различным элементам веб-страницы. Этот метод упрощает написание CSS-кода, избавляя от необходимости дублировать стили для каждого типа элементов отдельно.
Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:
h1, h2, p, li {
color: #333;
font-family: 'Arial', sans-serif;
}
В этом примере все заголовки первого и второго уровней, абзацы и элементы списка (<li>
) окрашиваются в темно-серый цвет (#333
) и стилизуются шрифтом Arial. Использование списка селекторов позволяет значительно сократить количество кода, необходимого для применения общих стилей к разным элементам.
Применение списка селекторов эффективно во многих ситуациях, включая:
- Применение базовых стилей текста (цвет, шрифт, размер) к различным типам элементов.
- Сброс стандартных отступов для элементов списка, параграфов и других блочных элементов.
- Установка общих стилей для интерактивных элементов, таких как кнопки и ссылки, в различных частях веб-страницы.
При работе с списком селекторов важно учитывать, что стили будут применены ко всем указанным элементам. Для более специфичных стилевых задач следует использовать классы или идентификаторы, а также более конкретные типы селекторов.
Списки селекторов улучшают читаемость и поддерживаемость CSS-кода, позволяя разработчикам более эффективно управлять стилями веб-страницы. Этот подход способствует сокращению дублирования кода и обеспечивает более упорядоченную структуру стилей.
- 4 апреля 2024

Смежный селектор +
Смежный селектор в CSS, обозначаемый знаком плюс (+
), позволяет выбирать элемент, который является непосредственным соседом другого элемента на одном и том же уровне иерархии DOM. Этот селектор эффективен для применения стилей к элементу, находящемуся в точном последовательном порядке после другого элемента в коде HTML.
Пример применения смежного селектора:
h2 + p {
color: #757575;
margin-top: 0;
}
В данном случае к абзацу (<p>
), непосредственно следующему за заголовком второго уровня (<h2>
), применяются определенные стили: цвет текста изменится на серый, а верхний отступ будет устранен. Это особенно полезно для визуальной корректировки расположения текста после заголовков, чтобы обеспечить более четкое и аккуратное представление контента.
Смежный селектор находит широкое применение в веб-разработке для детальной настройки отступов между элементами и для реализации определенных стилевых эффектов, зависящих от положения элементов друг относительно друга в документе.
При использовании смежного селектора важно учитывать следующие моменты:
- Применяйте смежный селектор с умом, особенно в сложных структурах HTML, поскольку изменения в разметке могут повлиять на его работоспособность.
- Смежный селектор идеален для случаев, когда необходимо модифицировать стиль элемента в зависимости от его расположения по отношению к предыдущему элементу на том же уровне.
- Ограничьте использование смежного селектора для поддержания простоты и читаемости кода, особенно когда речь идет о крупных стилевых листах.
Соблюдение стандартов кодирования и внимание к деталям в оформлении помогут создать легко поддерживаемый и гибкий код CSS, способствующий эффективной стилизации веб-страниц.
- 4 апреля 2024