Display block css что это

display

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

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

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

Кратко
Пример
Как понять
Как пишется
Подсказки

На практике

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

В чём разница между 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 57, поддерживается 57
Edge 79, поддерживается 79
Firefox 81, поддерживается 81
Safari 9, поддерживается 9

На практике

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

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

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

�� Если задаёте 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 , и два блока будут прижаты к краям родителя ��

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

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

Все значения свойства 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 в CSS

Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display .

Тип отображения может влиять сразу на две вещи: на расположение самого бокса в потоке и на расположение дочерних элементов внутри бокса.

Тот факт, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.

Рассмотрим четыре основных типа боксов:

блочные, display: block ,
строчные, display: inline ,
блочно-строчные, display: inline-block ,
гибкие или флексовые (флексы), display: flex .

Блочный бокс

Особенности блочных боксов

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

На блочные боксы действуют все свойства блочной модели ( width , height , margin , padding ).

Блочный бокс по умолчанию тянется на всю ширину родительского элемента.

По высоте блочный бокс ужимается под содержимое.

Пример поведения

Внутри есть четыре тега, и все эти теги являются блочными.

Хорошо видно, что строки текста внутри очень короткие, и можно было бы эти элементы ужать под текст. Но заголовки тянутся на всю ширину и занимают всю доступную в родителе ширину, за исключением внутренних отступов.

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

Строчный бокс

Строчный бокс — это фрагмент текста, который может разрываться и находиться на нескольких строках.

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

Отличия строчных и блочных боксов

У строчных боксов несколько отличий от блочных:

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

Пример поведения

Посмотрите, как ведёт себя строчный бокс, если он не помещается в строке.

Строчные боксы — это не только теги и , но и обычный текст, который не обёрнут во фразовый тег. Такие фрагменты текста оборачиваются в анонимный строчный бокс. Анонимных боксов в рассмотренном примере три (это участки между явными строчными боксами, которые принадлежат тегам).

Блочный бокс — это прямоугольный статичный «кирпич», а строчный бокс — это что-то гибкое и текучее внутри этого «кирпича».

Блочно-строчный бокс

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

Флексбокс

Флексы — основной инструмент построения крупных сеток и микросеток.

Есть несколько особенностей, которые следует помнить и учитывать при использовании флексов:

Все блоки очень легко делаются «резиновыми», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Флекс адаптирован для этого. В нем есть «начало» и «конец», а не «право» и «лево». В браузерах с локалью rtl все элементы будут автоматически расположены в обратном порядке.
Синтаксис CSS-правил очень прост и осваивается довольно быстро.

При этом есть вещи, которые не стоит забывать при использовании флексбокса:

Не используйте флексы там, где в этом нет необходимости.
Разберитесь с флексбоксом и знайте его основы. Так намного легче достичь желаемого результата. К примеру, по умолчанию флекс-элементы вытягиваются по поперечной оси и установленное значение высоты для элемента никак не учитывается.
Не забывайте про margin . Они учитываются при установке выравнивания по осям. Важно помнить, что margin во флексбоксе не «схлопываются», как это происходит в обычном потоке.
Значение float у флекс-блоков не учитывается и не имеет значения.

Еще о флексбоксах

Что выбрать — флексы или гриды
Кому нужны флексы
Примеры использования флексбоксов

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

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

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

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

Решение:

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

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

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

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

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

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

10 июля 2023

Как верстать и оформлять цитаты

�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.

22 июня 2023

CSS Display block inline и сравнение блочных и строчных элементов.

Свойство DISPLAY меняет поведение элемента на странице в зависимости от того, какое ему значение задаем. Значений много, но на ПРАКТИКЕ применяются ВСЕГО пять: block, inline, inline-block, none, flex;

display:none

Начнем с самого простого: display:none — убирает элемент из верстки, то как будто мы его удалили или закомментировали. Не стоит путать с visibility:hidden и opacity:0; — они делают элемент полностью прозрачным, но не убирают его, то есть его место остается не занятым, поскольку другие элементы думают что он есть, а при display:none они займут его место.

display:flex

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

display:block

Блочный элемент — применяется для создания структуры сайта или его элементов. Типичный и наиболее распростаненный представитель — DIV. То есть блочный элемент — это обычный прямоугольник, но в отличие от строчного он изначально принимает всю доступную ширину, а высота — в зависимости от количества контента в нем. если в нем ничего нет, то высота =0. Если с помощью height задать ему размеры, например, 50px, то он их примет, в независимости от контента, и не важно контента больше или меньше. Аналогично с шириной.
К блочным относятся: DIV, H1-H6, P, header, footer, section и другие

display:inline

Строчные элементы — в подавляющем большинстве случаев применяются для форматирования текста, например, сделать полужирным, наклонным, поменять цвет, подчеркивание итд. Типичным строчным элементов является span, который сам по себе ничего не делает, но с помощью стилей можно поменять текст внутри него, например, сделать полужирным или наклонным, то есть без использования b и i.
К строчным относятся: span, i, em, a, b, strong и другие

display:inline-block

Блочно-строчные все таки ближе по поведению к строчным, но в отличие от строчных они изначально имеют определенную высоту и ширину, но встраиваются в текст, например, вставленные смайлики внутри текста, если они по высоте меньше или равны высоте букв, то вы и не заметите особой разницы, а вот если вставить блочный элемент внутри текста, то увидите как все сильно поменяется.
К блочно-строчным относятся: IMG, input, select и другие. Важно! В документациях часто противоречивая информация, поэтому проверяйте все на практике:
https://jsfiddle.net/ybdagzn7/
Также в документациях бывает только разделение на два вида: блочные и строчные, а все блочно-строчные хаотично разбросаны в одну из категорий, но чаще к строчным.

Сравнительная таблица блочных и строчных элементов

block	inline-block	inline
Ширина width по умолчанию	Занимает всю доступную ширину, то есть 100%.	Занимает ширину по количеству контента	Занимает ширину по количеству контента
width=500px	принимает	принимает	проигнорирует
height	по количеству контента	по количеству контента	по количеству контента
внутренний отступ = padding	принимает	принимает	применяется, но на соседние элементы не влияет.
margin	принимает	принимает	применяется только справа и слева, влияние на соседей оказывает

Более подробно про отличия: https://html5book.ru/block-inline-elements/ и тут https://webref.ru/layout/howtocodeinhtml/chapter10

Display block css что это

display

Кратко

Пример

Как понять

Как пишется

Подсказки

На практике

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

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

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

Значение none

Значение block

Значение inline

Значение inline-block

Значения table-*

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

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

Про пчёл.

Про пчёл.

Зачем нужно свойство display в CSS

Блочный бокс

Особенности блочных боксов

Пример поведения

Строчный бокс

Отличия строчных и блочных боксов

Пример поведения

Блочно-строчный бокс

Флексбокс

При этом есть вещи, которые не стоит забывать при использовании флексбокса:

Еще о флексбоксах

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

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

Что всё это значит

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

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

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

HTML

CSS (styles.css):

JavaScript (script.js)

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

Метод 1: Flexbox

Метод 2: CSS Grid

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

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

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

CSS-свойство contain

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

Как перекрыть один элемент другим. CSS-свойство z-index

Как верстать и оформлять цитаты

CSS Display block inline и сравнение блочных и строчных элементов.

display:none

display:flex

display:block

display:inline

display:inline-block

Сравнительная таблица блочных и строчных элементов

Знание это сила

Добавить комментарий Отменить ответ