Css display webkit inline box

display

Свойство display (CSS) определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс — это прямоугольная область, являющаяся изображением элемента).

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

/* values */ display: block; display: inline; display: run-in; /* values */ display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; /* plus values */ display: block flow; display: inline table; display: flex run-in; /* values */ display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block; /* values */ display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; /* values */ display: contents; display: none; /* values */ display: inline-block; display: inline-table; display: inline-flex; display: inline-grid; /* Global values */ display: inherit; display: initial; display: unset; 

Начальное значение	inline
Применяется к	все элементы
Наследуется	нет
Обработка значения	как указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного.
Animation type	Not animatable

Синтаксис

Свойство display задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:

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

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

Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.

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

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

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

Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

«Наследственные» значения отображения

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

.container  display: inline flex; > 

В настоящее время это можно задать с помощью одного значения.

.container  display: inline-flex; > 

Формальный синтаксис

display =
[ (en-US) || (en-US) ] (en-US) | (en-US)
| (en-US)
| (en-US)
| (en-US)
| (en-US)
|| (en-US) [ (en-US) | (en-US) math ] (en-US)

=
block | (en-US)
inline | (en-US)
run-in

=
flow | (en-US)
flow-root | (en-US)
table | (en-US)
flex | (en-US)
grid | (en-US)
ruby

=
? (en-US) && (en-US)
[ (en-US) flow | (en-US) flow-root ] (en-US) ? (en-US) && (en-US)
list-item

=
table-row-group | (en-US)
table-header-group | (en-US)
table-footer-group | (en-US)
table-row | (en-US)
table-cell | (en-US)
table-column-group | (en-US)
table-column | (en-US)
table-caption | (en-US)
ruby-base | (en-US)
ruby-text | (en-US)
ruby-base-container | (en-US)
ruby-text-container

=
contents | (en-US)
none

=
inline-block | (en-US)
inline-table | (en-US)
inline-flex | (en-US)
inline-grid

Примеры

В разделе Syntax содержатся несколько примеров для разных типов значений display , которые это свойство может принимать.

Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений display в других статьях на MDN:

Доступность

display: none;

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

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

display: contents;

Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

Таблицы

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

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

display

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline . In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none , all descendant elements also have their display turned off. The document is rendered as though the element doesn’t exist in the document tree.

/* values */ display: block; display: inline; display: run-in; /* values */ display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; display: subgrid; /* plus values */ display: block flow; display: inline table; display: flex run-in; /* values */ display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block; /* values */ display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; /* values */ display: contents; display: none; /* values */ display: inline-block; display: inline-list-item; display: inline-table; display: inline-flex; display: inline-grid; /* Global values */ display: inherit; display: initial; display: unset;

Initial value	inline
Applies to	all elements
Inherited	no
Media	all
Computed value	as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

Currently it’s best to specify display using a single keyword: although the latest specifications allow you to combine some keywords, this is not yet well supported by browsers.

Values

• If the run-in box contains a block box, same as block.
• If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
• If an inline box follows, the run-in box becomes a block box.

If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

Depending on the value of other properties (such as position , float , or overflow ) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context.

The element generates a block box for the content and a separate list-item inline box.

If no value is specified, the principal box’s inner display type defaults to flow . If no value is specified, the principal box’s outer display type defaults to block .

Some layout models, such as table and ruby, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those «internal» display values, which only have meaning within that particular layout mode.

Unless otherwise specified, both the inner display type and the outer display type of elements using these display values are set to the given keyword.

Value	Description
table-row-group	These elements behave like HTML elements
table-header-group	These elements behave like HTML elements.
table-footer-group	These elements behave like HTML elements.
table-row	These elements behave like HTML elements.
table-cell	These elements behave like HTML elements.
table-column-group	These elements behave like HTML elements.
table-column	These elements behave like HTML elements.
table-caption	These elements behave like HTML elements.
ruby-base	These elements behave like elements.
ruby-text	These elements behave like elements.
ruby-base-container	These elements behave like elements generated as anonymous boxes.
ruby-text-container	These elements behave like elements.

These values define whether an element generates display boxes at all.

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

It is equivalent to inline flow-root .

It is equivalent to inline table .

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to inline flex .

Formal syntax

[ || ] | | | | 
where 
 = block | inline | run-in
 = flow | flow-root | table | flex | grid | subgrid | ruby
 = list-item && ? && [ flow | flow-root ]?
 = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
 = contents | none
 = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Examples

Hide element

HTML content

Visible text
 
Invisible text

Источник

Value	Description
contents	These elements don’t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
none