Свойство display в CSS используется для настройки отображения элемента. Он управляет и изменяет способ отображения элементов HTML на веб-странице.
Каждый элемент, отображаемый на странице, имеет свое свойство display. Оно может быть либо присвоенным по-умолчанию, либо присвоенное специально программистом.
Прежде чем перейти к конкретным свойствам display, мы рассмотрим, что такое блочные и строчные элементы.
Элемент блочного уровня всегда начинается с новой строки и занимает всю доступную ширину. Теги , , , в HTML — это теги, которые отображаются как «блок».
Строчный элемент не начинается с новой строки и занимает только необходимую ширину. Теги , , , в HTML — это теги, которые отображаются как строчные.
Основные значения свойства display
Давайте теперь рассмотри различные свойства display.
Inline
Используется для отображения строчного элемента. Строковые элементы отображаются в одну строку, т. е. горизонтально, и занимают столько ширины, сколько необходимо. Строковые элементы игнорирует высоту и ширину, заданные пользователем. Примерами встроенных элементов являются теги , , и .
Боксы выше расположены горизонтально в одну строку. Несмотря на то, что мы установили высоту и ширину блоков — свойство inline игнорирует это. Поэтому боксы занимают строго столько места, сколько необходимо для размещения текста внутри них
Block
Свойство block используется для отображения блочных элементов. Блочные элементы располагаются один по другим. Для них можно менять высоту и ширину. Если ширина явно не указано, то блочный элемент займет всю ширину родительского контейнера.
Рассмотрим пример тремя боксами, обернутыми в родительский контейнер.
Blue box
Red box
Green box
Явно указываем ширину только для box—blue, для остальных боксов указываем только высоту.
Мы видим, что все элементы расположились друг под другом. Синий бокс имеет фиксированную ширину и высоту, так как мы ее явно задали. Остальные боксы тянутся по ширину на весь родительский контейнер (для наглядности добавил внутренний отступ padding).
Inline-block
Свойство inline-block относится к блочно-строчным элементам. Выше мы видели, что строчные элементы располагаются рядом друг с другом, а их высота и ширина, заданные явно, не отображаются. При этом блочные элементы отображают, заданные нами размеры.
Свойство inline-block позволяет размещать элементы в строке, но при этом явно задавать им ширину и высоту. По сути inline-block является комбинацией двух свойств: inline и block.
Flex используется для отображения элемента в виде гибкого контейнера. Отображение элементов начинается с начального края главной оси. Главная ось определяется свойством flex-direction, которое может определять как вертикальное, так и горизонтальное направление flex-элементов.
Grid
Grid используется для отображения элемента как контейнера сетки.
Inherit
Inherit нужен для наследования свойства display элемента от его родительских элементов. Используется когда мы создаем вложенные элементы (например внутри ). Вместо того, чтобы каждый раз указывать свойство display дочернего элемента, мы можем просто наследовать его от родительского.
Initial
Initial используется для установки свойства display в значение по умолчанию. Начальное значение можно использовать для восстановления всех свойств CSS. Например: если мы установим display со значением initial для элемента , то элемент будет отображаться как блочный (по умолчанию).
Вывод
Свойство display в CSS используется для настройки отображения элемента.
Display управляет и изменяет способ отображения элементов HTML на веб-странице.
Отображаемое значение по умолчанию для большинства элементов — блочное или встроенное.
Наиболее важными значениями свойств являются inline, block, inline-block и none.
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Невидимый div (
Я - невидим!
) Стоит внутри скобок
Значение block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию: , заголовок , параграф
.
Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Во всём остальном – это блок, то есть:
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт 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 по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Если после 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
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Introduction
display: inline-block brought a new way to create side by side boxes that collapse and wrap properly depending on the available space in the containing element. It makes layouts that were previously accomplished with floats easier to create. No need to clear floats anymore. Compared to display: inline , the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline , top and bottom margins & paddings are not respected, and with display: inline-block they are. Now, the difference between display: inline-block and display: block is that, with display: block, a line break happens after the element, so a block element doesn’t sit next to other elements. Here are some visual examples:
display: inline
Notice here how the width and height are not respected, and how the padding top and bottom are present, but overlap over the lines above and under.
span.boxdisplay: inline;/* the default for span */width:100px;height:160px;padding:18px;>
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases. Learn more about us
