Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице. Свойство CSS display (block, inline, none) — способы отображения HTML элементов на вэбстранице

Свойство CSS Display нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных "спецэффектов".

Синтаксис CSS Display

display : value ;

Где value может принимать значения:

block - блочный элемент (автоматически создает перевод строки)
inline - встроенный элемент (не создает перевода строки);
inline-block - производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
list-item - блочный элемент с маркером списка;
run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста;

table - равносильно таблице (тег ), с переносом строки;

inline-table - производная от table. Элемент является встроенным, но соседние элементы его обтекают;

table-caption - создания заголовка таблицы (аналог тега

);

table-cell - создания элемента ячейки таблицы (аналог тега

);

table-column - элемент определяющий столбец таблицы;

table-row - элемент определяющий строку таблицы;

none - элемент не отображается на странице и все другие элементы ведут себя так, как будто его нет вообще;

inherit - наследование от элемента родителя;

Примечание
По умолчанию все элементы являются строчными display :inline

Примеры использования Display

Пример №1. Использование display:block

Как видите, строка перенеслась автоматически

В примере добавлено свойство border:1px solid #000 чтобы показать, какую область занимает блочный элемент.

Абзац №1. Рассматриваем элементы display. текст со свойством display:block Как видите, строка перенеслась автоматически

Пример №2. Использование display:none

Вот как это выглядит на странице:

Абзац №1. Рассматриваем элементы display:none. текст со свойством display:none Как видите, блок с текстом none отсутствует

Логично провести ассоциацию с атрибутом visibility: hidden , но в отличии от него, display:none не отводит места под объекты.

Это свойство является очень полезным, например, при создании эффектов выпадающего меню.

Пример №3. Использование display:inline-block

Как видите, блок с текстом none отсутствует

Вот как это выглядит на странице:

Абзац №1. Рассматриваем элементы. текст со свойством display:inline-block Как видите, блок вставлен прямо в контент

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

Краткая информация

Синтаксис

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

block Элемент показывается как блочный. Применение этого значения для строчных элементов, например , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. inline Элемент отображается как строчный. Использование блочных элементов, таких, как

Автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный. inline-table Определяет, что элемент является таблицей, как при использовании

, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели. flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. list-item Элемент выводится как блочный и добавляется маркер списка. none Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента. run-in Устанавливает элемент как блочный или строчный, в зависимости от контекста. table Определяет, что элемент является блочной таблицей, подобно использованию

. table-caption Задаёт заголовок таблицы, подобно применению . table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании . table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой . table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой . table-row Элемент отображается как строка таблицы ( ). table-row-group
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию .

Пример

display

Пример

Формула серной кислоты: H₂ SO₄

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

Объект .style.display

Примечание

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для элементов

и ;

для элементов

понимает значение block как list-item ;

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

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для

;

значение table-column-group поддерживается только для

Chrome до версии 4, а также Safari до версии 5:

значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline .

Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .

Значение run-in больше не поддерживается.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Браузеры

. table-cell Указывает, что элемент представляет собой ячейку таблицы (
или	). table-column Назначает элемент колонкой таблицы, словно был добавлен


none, inline, block	4	12	1	7	1	1
inline-block	5.5	12	1	7	1	3
inline-flex, flex	11	12	29	17	9	28
list-item	6	12	1	7	1	1
run-in	8	12	1	7	1
inline-table	8	12	1	7	1	3
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption	8	12	1	7	1	1

Здравствуйте, уважаемые читатели блога сайт. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline . Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

visibility: visible|hidden|collapse

Атрибут может принимать три значения:

visible - элемент отображается на web-странице (значение по умолчанию);
hidden - элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
collapse - применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.

Ниже можно посмотреть как работает это свойство:

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

А html код так:

Наведи на меня курсором мыши!

Я невидимый абзац. Я появляюсь, когда вы наводите на соседний со мной сверху абзац!

Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.

Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

А вот атрибут намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.

Доступных значений у этого стиля довольно много:

Если кратко, то каждое значение оказывает на html элементы следующее действие:

block — элемент отображается как блочный;
inline — элемент выводится как строчный;
inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега );

inline-table — делает из элемента таблицу, как при использовании тега , но при этом таблица является встроенным элементом и она обтекается другими элементами;

list-item — элемент становится блочным и к нему добавляется маркер списка;
none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;

run-in — элемент становится блочным или строчным в зависимости от контекста;

table — задает, что элемент является таблицей как при использовании тега

;

table-caption — формирует из элемента заголовок таблицы, как при применении тега

;

table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега

;

table-footer-group — действует подобно тегу

table-header-group — по своему действию значение похоже на тег

table-row — делает из элемента строку таблицы как тег

;

table-row-group — действует как тег

Делаем блочный элемент строчным — значения block и inline

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

При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный . От этого во многом зависит поведение элемента на веб странице: будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4 ». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило

Для остальных элементов, если не указано иного, применяется правило display:inline .

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

Давайте рассмотрим такой пример:

Заголовок h1

В примере два элемента: один блочный (h1) и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью :

На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.

В следующем примере сделаем из блочного элемента h1 строчный . Для этого в стилях добавим для него правило display:inline:

Заголовок h1

Элемент span — строчный элемент

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

Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным :

Заголовок h1

Элемент span — строчный элемент

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

Таким образом, можно манипулировать любыми элементами хтмл страниц: например, превращать в строчные элементы, а строчные в блочные.

Динамика на html странице с помощью правила CSS — display none

Прописанное для любого элемента правило display:none удаляет его из документа и никак его не отображает. При этом для него даже не резервируется занимаемое место на веб странице, как это было с правилом visibility:hidden, рассмотренном выше. Веб страница формируется так словно элемента и не было на странице.

Значение «none» для правила display применяется в основном для реализации динамики на странице , используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.

Таким образом можно реализовать создание выпадающего меню , сделав выпадение содержимого списка при наведении на него мышки. При в обычном состоянии для списка должно быть прописано правило «display:none», а при наведении на него мышкой устанавливать для него правило «display:block»:

пункт 1
пункт 2

И код примера:

пункт 1

пункт 2

Кроме рассмотренных подробно block, inline и none, правило display может принимать еще множество различных значений. Но они используются редко.

Например правило display:list-item позволяет сделать блочные теги элементами списка. Например у нас есть несколько подряд идущих абзацев:

абзац 1

абзац 2

абзац 3

Которые по умолчанию будут выглядеть примерно так:

Теперь если для этих абзацев прописать правило display:list-item, то браузер сформирует специальную область в которой отобразит маркеры. Правда, чтобы их увидеть, необходимо каким-то образом отодвинуть абзацы от левого края. Сделать это можно с помощью правила margin-left, указав нужный отступ:

абзац 1

абзац 2

абзац 3

Результат:

В итоге без использования тегов

мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила .

Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.

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

Таким образом с помощью правила display можно поменять уже имеющиеся на странице элементы на любые другие. При это не надо вносить изменения в сам html код, а достаточно просто изменить отображение тегов в браузере. Для этого достаточно внести пару строк в содержимое css файла и все.

На этом заканчиваю, не забывайте подписываться на обновления блога и нажимать на кнопочки социальных сетей! До новых встреч!

Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block , inline и none . Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.

Прежде чем мы поговорим о свойстве display , мы должны упомянуть «дерево блоков» (box tree).

CSS берет исходный документ, организованный как дерево элементов и текстовых узлов, и отображает его на холст (например, экран монитора). Для этого он создает промежуточную структуру, дерево блоков , которая представляет собой структуру форматирования для готового (визуализированного) документа. Каждый блок в дереве блоков соответствует соответствующему элементу в пространстве и/или времени на холсте.

Чтобы создать дерево блоков, CSS сначала использует каскадирование и наследование, чтобы назначить вычисленное значение для каждого свойства CSS каждому элементу в исходном дереве. Затем для каждого элемента CSS генерирует ноль или более блоков, как указано в свойстве display этого элемента. Другими словами, свойство display определяет тип отображения каждого блока в дереве блоков .

Все элементы имеют значение display по умолчанию, но его можно переопределить, явно установив значение display на что-то другое. Значение по умолчанию в XML (а также для элементов SVG) является inline . А в HTML значения свойств display по умолчанию берутся из поведения, описанного в спецификациях HTML, или из таблицы стилей по умолчанию для браузера/пользователя.

Основные значения свойства display в CSS

Элемент генерирует «коробку» блочного уровня. Все элементы на этом уровне начинаются с новой строки (вертикально) и, если не указано иное, растягиваются до ширины своего контейнера. Элементы прилегают вплотную друг к другу, если для них не заданы отступы (margin).

Удаляет элемент и его дочерние элементы из обычного потока документа. Документ отображается так, как будто этого элемента никогда не было, а занимаемое им место не резервируется. Считыватели экрана также игнорируют содержимое такого элемента.

display: inline;

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

display: list-item;

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

display: inline-block;

Элемент генерирует «коробку» блочного уровня, но весь блок ведет себя как встроенный (инлайновый) элемент. Т.е., он «обтекается» другими элементами веб-страницы.

Табличный уровень

Существует много значений display , которые позволяют элементам вести себя так же, как и HTML таблицы. В таблице ниже представлены значения «табличного уровня» и их краткое описание.

;
table-cell — элемент представляет из себя ячейку таблицы, подобно тегу
или	; table-column — элемент является колонкой таблицы, как при теге

table

Соотносится с HTML элементом. Определяет «коробку» блочного уровня. HTML элементом. HTML элементом. HTML элементом. HTML элементом. HTML элементом. HTML элементом.

HTML элементом.
table-header-group	Соотносится с
table-row	Соотносится с
table-cell	Соотносится с	HTML элементом.
table-row-group	Соотносится с
table-footer-group	Соотносится с
table-column-group	Соотносится с
table-column	Соотносится с
table-caption	Соотносится с
inline-table	Это единственное значение, которое не имеет прямого сопоставления с HTML элементом. Элемент будет вести себя как элемент HTML таблицы, но как инлайновый блок, а не как элемент блочного уровня.

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

Более современные значения

Способ отображения контента на веб-странице достаточно сильно изменился с момента появления HTML. Когда веб-дизайнеры хотели создать какой-то креативный макет, первым используемым методом было вложение HTML-таблиц (табличные макеты).

А когда CSS ставал все более популярным, верстальщики перешли к плавающим макетам, размещая контент в разных плавающих div , чтобы добиться желаемого эффекта. Такая техника до сих пор очень распространена, но после появления flexbox (макета гибкой «коробки» в CSS), эта ситуация будет длиться все меньше. Когда макет гибкой «коробки» будет полностью поддерживаться всеми браузерами, гибкие макеты станут преобладающим методом верстки. Тем не менее, не все браузеры поддерживают спецификацию flexbox , и это сильно тормозит ее развитие.

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

Объявляя display: flex; для элемента, он становится flex (гибким) контейнером, а его дочерние элементы становятся гибкими элементами этого контейнера. Свойства flex не распространяются на внуков этого элемента. Как гибкий контейнер, так и гибкие элементы имеют свои собственные гибкие свойства.

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

Обратите внимание, что CSS-сетка официально не реализована ни в одном браузере. Чтобы поддерживать ее, браузерам нужно указывать префиксы поставщиков и устанавливать флаги.

Экспериментальные значения (не должны использоваться в рабочем коде)

display: run-in;

Теоретически, если вы устанавливаете свойство display элемента в run-in , он отображается как блок внутри другого блока. Вариант использования этого свойства заключается в том, чтобы иметь собственный метод для создания заголовков, которые визуально располагаются в той же строке, что и последующий контент.

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

Обратите внимание, что это значение поддерживается только в Internet Explorer 11 и Opera Mini.

Элемент ведет себя как инлайновый и выдает свое содержимое в соответствии с моделью форматирования элемента HTML. Если вкратце, то это позволяет отображать аннотации рядом с базовой линией текста (обычно для помощи в произношении). Такая техника довольно распространена в китайском и японском языках.

display: contents;

Суть этого значения заключается в том, что когда вы его используете для элемента, он исчезает из DOM, но все его потомки остаются и занимают свое пространство. Эта спецификация на данный момент поддерживается только в Firefox >59, Chrome >65, Safari 11.1.

Краткий итог

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

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block . Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

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

И плакал.

Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.

Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.

Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block :

This is awesome

Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:

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

А происходит здесь следующее, базовая линия (baseline) каждого элемента