Inline block css что это

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

 Невидимый div ( Я - невидим!
 ) Стоит внутри скобок

Значение block

Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: , заголовок , параграф

 Первый
 Второй

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

 . Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

 Инлайн Блок
 Инлайн

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

Располагается в строке.
Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

Элемент всегда прямоугольный.
Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

  Имя: Фамилия:

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

 div Элемент
С неизвестной
Высотой

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Пункт 1

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Про пчёл.
 Пчёлы - отличные создания, они делают мёд.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

 Про пчёл.
Пчёлы - отличные создания, они делают мёд.

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Как отобразить элемент на странице. Свойство display

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

Значения свойства display

block ,
inline ,
inline-block ,
none .

Теперь разберём на примерах значения свойства display .

block — элемент отображается как блок и занимает всю доступную ширину. Новый блок начинается с новой строки. Примером элемента, который имеет значение display: block , может быть div .

 Заголовок блока
 Текст внутри блока

.block

inline — элемент отображается как строчный элемент и не создаёт новый блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого. Примером элемента, который имеет значение display: inline , может быть span .

Этот текст выделенный текст и еще немного текста

.inline

Этот текст выделенный текст и еще немного текста

inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. Примером элемента, который имеет значение display: inline-block , может быть button .

Этот текст находится на той же строке, что и
 этот текст

.inline-block

none — элемент не отображается на веб-странице и его содержимое не занимает места. Это может быть полезно для скрытия элементов на странице или для создания анимаций. Примером элемента, который имеет значение display: none , может быть script .

Этот элемент скрыт

.hidden

Пример использования свойства display с разными значениями.

Этот блочный элемент занимает всю ширину.
 Этот строчный элемент занимает только столько места, сколько ему нужно.  Этот элемент имеет значение none, поэтому он не отображается на веб-странице.

Стилизуем элементы так:

.block-example < display: block; background-color: yellow; >.inline-example < display: inline; background-color: pink; >.inline-block-example < display: inline-block; background-color: lightblue; width: 200px; height: 50px; >.hidden-element

Блочный элемент имеет жёлтый фон, строчный элемент — розовый фон, элемент button — голубой фон и имеет ширину и высоту, а скрытый элемент не отображается на странице.

Наследуется ли свойство display

Свойство display является не наследуемым, что означает, что тип отображения элемента не будет наследоваться его потомками. Тип отображения элемента должен быть указан явно для каждого элемента на странице.

Например, если родительский элемент имеет свойство display: block; , а его дочерний элемент не имеет заданного свойства display , то тип отображения дочернего элемента будет определён по умолчанию и может отличаться в зависимости от типа элемента.

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

 Это абзац, наследующий свойства родительского элемента
 Это абзац с явно заданным типом отображения

Стили для блоков:

.parent < display: block; >.child

Здесь родительский элемент имеет свойство display: block; , но дочерний элемент .child имеет свойство display: inline; . Поэтому абзац, находящийся в дочернем элементе, будет отображаться как инлайновый элемент, несмотря на то, что родительский элемент имеет тип отображения блочного элемента.

Нюансы использования

Как и любое CSS-свойство, display имеет нюансы и особенности, которые важно учитывать при создании веб-страниц.

display определяет, как элемент будет взаимодействовать с другими элементами на странице. Например, элементы с типом block занимают всю доступную ширину и начинаются с новой строки, что может повлиять на позиционирование других элементов на странице.
Некоторые элементы имеют собственные значения по умолчанию для свойства display . Например, div имеет значение по умолчанию display: block , а span имеет значение display: inline . Поэтому, если вы хотите изменить значение display для этих элементов, необходимо указать это в CSS.
При использовании значения display: inline-block нужно учитывать, что между элементами может появиться небольшой пробел, который вызван пробелом в HTML-коде. Этот нюанс можно устранить разными способами, например, удалением пробелов в коде или применением стилей, которые устраняют эффект.

⭐ Поддержка браузерами свойства display

Материалы по теме

CSS-свойство position
Как прятать
CSS-свойство max-height

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

IE 11, 10, 9, 8, 7, …
Chrome 4–35
Edge 12 и 13
Safari 3–9.1
Firefox 2–38
Opera 22 и ниже
Android 4.4.4 KitKat и ниже (а это
Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>);

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

13 июля 2023

Строчно-блочные элементы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Галерея фотографий

Рис. 1. Галерея фотографий

Если для формирования секций использовать блочный элемент, то он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задавать размеры всей секции. Одним из решений является применение строчно-блочных элементов, которые сочетают преимущества строчных и блочных элементов.

Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block .

Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: , , , .

Характеристики этих элементов следующие.

Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
Размеры содержимого можно устанавливать через свойства width и height .
Ширина блока получается сложением значений width , margin , border и padding .
Высота блока получается сложением значений height , margin , border и padding .
Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
Перенос текста считается за пробел.

Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block , а внутрь элемента добавить изображение и подпись к нему через (пример 1).

Пример 1. Создание галереи

Галерея

Софийский собор

Польский костёл

Купеческий клуб

Памятник Св. Владимиру

Обратите внимание, что высота секций различается, поскольку в стилях высота никак не ограничена, в отличие от ширины. Выравнивание секций можно установить через свойство vertical-align , в данном примере выравнивание делается по верхнему краю с помощью значения top .

Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).

Пример 2. Макет из трёх колонок

Колонки создаём с помощью элементов и в стилях для каждой колонки устанавливаем свойство display со значением inline-block , а также задаём выравнивание по верхнему краю через vertical-align . Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box . После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.

Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.

Перенос колонки на другую строку

Рис. 2. Перенос колонки на другую строку

Это связано с особенностью строчных элементов, что перенос текста в коде воспринимается как пробел. Соответственно, этот пробел и виден между колонок, он же и оказывает влияние на общую ширину макета, что и приводит к переносу последней колонки на новую строку. Ей просто не хватает места.

Способов борьбы с этой особенностью несколько, они связаны как с редактирование кода HTML, так и воздействием через CSS. В HTML всё сводится к тому, чтобы не стало пробелов между закрывающим и открывающим тегами. Перечислим некоторые популярные методы.

Перенос атрибутов в на другую строку.

Колонка 2
Колонка 3

В HTML допустимо переносить закрывающую угловую скобку.

Перенос текста внутри .

Использование комментариев в HTML.

Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.

В CSS тоже есть несколько методов.

Отрицательный margin-right или margin-left . Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.

section

Нулевой размер шрифта. Для родительского элемента ставим нулевое значение font-size , а затем для возвращаем его в желаемое значение.

main < font-size: 0; >section

После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).

Макет из трёх колонок

Рис. 3. Макет из трёх колонок

display

Как поставить несколько элементов в строку? Объясняем, как менять стандартный тип отображения на произвольный. Подробно говорим об основных типах отображения.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
1. Алёна Батицкая советует
1. В чём разница между inline и inline-block?
Контрибьюторы:

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

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

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

Бывают и другие специфичные значения, например, flex , grid , table — cell .

Пример

Скопировать ссылку «Пример» Скопировано

Частая ситуация: на странице нужно показать иконки соцсетей со ссылками на аккаунты.
```
 div class="wrapper"> ul class="social"> li class="social__item twitter"> a href="" class="social__link">a> li> li class="social__item fb"> a href="" class="social__link">a> li> li class="social__item youtube"> a href="" class="social__link">a> li> ul> div>      
```
Обратите внимание, что внутри ссылок ничего не написано. Нам не нужно выводить название соцсети, а нужно вывести иконку с логотипом. Что мы и сделаем при помощи фона.

Выстраиваем пункты списка в ряд, а не друг под другом:
```
 .social__item  display: inline-block;> .social__item  display: inline-block; >      
```
Превращаем ссылки из строчных в блочные элементы. После этого можем задать высоту и ширину:
```
 .social__link  display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain;> .social__link  display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain; >      
```
Задаём иконки фоном для каждой отдельной ссылки:
```
 .twitter  background-image: url(twitter-round-blue.png);> .fb  background-image: url(fb-square-blue.png);> .youtube  background-image: url(youtube-red-square.png);> .twitter  background-image: url(twitter-round-blue.png); > .fb  background-image: url(fb-square-blue.png); > .youtube  background-image: url(youtube-red-square.png); >      
```
По умолчанию ссылки — строчные. Это значит, что им нельзя задать размеры ( width и height ) и фоновую картинку.

Пишем display : block , и строка превращается в условный прямоугольник, у которого могут быть и размеры, и фон.

После этого смело меняем размер на нужный нам и фоном выводим иконки каждой из соцсетей.

Помимо этого по ходу решения задачи мы установили свойство display : inline — block для пунктов списка с классом social _ _ item . За счёт этого элементы, которые по умолчанию блочные, приобретают внешние признаки строчных элементов. Вместо того чтобы выстраиваться друг под другом, пункты списка теперь стоят рядом, в строку.

Как понять

Скопировать ссылку «Как понять» Скопировано

Каждый HTML-элемент по умолчанию имеет свой тип отображения. Например, ссылки нужны для оборачивания слов и фраз. Значит, они должны быть строчными, чтобы не разорвать окружающий текст.

Но по разным причинам может понадобиться изменить стандартное отображение на то, которое больше подходит под решение текущей задачи.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Пишем имя свойства display и после двоеточия через пробел указываем одно из доступных значений при помощи ключевого слова.

Значения свойства, которые встречаются в работе чаще всего:
- none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
- block — элемент ведёт себя как блочный.
- inline — block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
- flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в Гайде по flexbox.
- grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки. Подробнее в Гайде по grid.
Остальные значения можно посмотреть в спецификации.

Это свойство можно применить к любому HTML-элементу.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство display нельзя анимировать ��

�� Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.
- Chrome 59, поддерживается 59
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 11, поддерживается 11
На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если задаёте display : inline — block , чтобы выстроить несколько блоков в строку, обязательно указывайте для родительского элемента font — size : 0 . Иначе между строчно-блочными элементами будут небольшие отступы, как между словами — пробелы.

�� Многие начинающие разработчики сталкиваются с проблемой при выводе иконок соцсетей фоном для ссылок. Ссылки изначально строчные. Для изменения размера ссылки и для возможности задать ей фон ссылку нужно сделать блочной ( display : block ) или строчно-блочной ( display : inline — block ).

�� Если нужно вывести на страницу данные в виде таблицы, то в HTML-разметке создайте таблицу при помощи соответствующих тегов. Не используйте display : table для визуального преобразования в таблицу тех элементов, которые не имеют никакого отношения к таблице. Помните про семантику! ☝️

Семантикой в вёрстке называют подбор тегов по смыслу элемента. Прошли эпохи вёрстки на таблицах и дивах. Теперь почти для всего есть отдельный тег. Например, для меню есть тег , а для основного контента страницы — .

�� Если нужно плавно показывать элемент или наоборот, прятать его, стоит присмотреться к решениям с использованием visibility и opacity . Или менять стили элемента при помощи JavaScript. Например, можно показывать другой текст по наведению на элемент:
```
    Я — текст простой. Наведи на меня курсор, и я покажу подсказку! Теперь ты читаешь скрытую подсказку! ��   div class="parent"> p class="some-text"> Я — текст простой. Наведи на меня курсор, и я покажу подсказку! span class="note">Теперь ты читаешь скрытую подсказку! ��span> p> div>      
```
```
 .some-text  position: relative;> .note  position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.35s;> .some-text:hover .note  opacity: 1;> .some-text  position: relative; > .note  position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.35s; > .some-text:hover .note  opacity: 1; >      
```
�� Очень много задач сегодня решает display : flex . С его появлением перестали так часто использоваться значение inline — block или свойство float . Например, частая задача вертикального выравнивания раньше решалась при помощи магических пассов — большого количества кода, — а теперь легко решается одним свойством align — items . Или прижать два блока к разным сторонам родителя раньше можно было при помощи float и заклинания для решения проблемы выпадания. Теперь достаточно написать justify — content : space — between , и два блока будут прижаты к краям родителя ��

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано
Похожие публикации: