Свойство CSS display
Свойство display определяет тип блока, который используется для HTML-элемента.
С помощью свойства display мы можем переопределить начальное значение элемента. Например, блочный элемент можно отобразить как строчный, указав значение "inline". В более старых спецификациях CSS строчный элемент не принимал свойства height и width для изменения своих размеров или высоты строкового блока. Однако современный CSS полностью поддерживает эти свойства для строчных элементов, и они действительно влияют на разметку.
В HTML значения свойства display по умолчанию берутся из поведения, описанного в спецификациях HTML, либо из таблицы стилей браузера или пользовательской таблицы стилей по умолчанию. С другой стороны, значение по умолчанию в XML — "inline".
В CSS есть несколько основных форматов блока:
- Inline
Строчные элементы или элементы строчного уровня — это блоки, которые располагаются в строке, не перенося её. Элементы<span>,<em>и<img>являются частью строкового блока, но не могут вызвать перенос строки. Строчные элементы могут иметь внутренние отступы и внешние отступы, но задание width и height не изменит их размеры или высоту строкового блока в более старых спецификациях CSS. Современный CSS полностью поддерживает эти свойства для строчных элементов, и они действительно влияют на разметку. Указание padding и margin для элемента будет сдвигать другие элементы в строке только по горизонтали. Однако элемент строчного уровня может принимать width и height, если он задан как inline-block с помощью свойства display. - Inline-block
Элементы inline-block такие же, как строчные элементы, за исключением того, что они принимают width и height. Width и height сдвигают элементы в строке как по горизонтали, так и по вертикали. - Block
Блочные блоки или элементы блочного уровня не находятся в строковом блоке, а разрывают его. По умолчанию они занимают как можно больше горизонтального пространства. Элементы блочного уровня могут содержать другие элементы блочного уровня. Примерами элементов блочного уровня являются<p>,<ul>,<h1>-<h6>,<div>,<section>и<ol>. - Flex
Свойство display также используется для Flexbox. Значение flex создаёт для элемента блок уровня блока и размещает содержимое согласно модели Flexbox. Здесь вы можете прочитать Полное руководство по Flexbox. - Grid
Свойство display изначально задаёт сеточную раскладку Grid. Оно создаёт для элемента блок уровня блока, размещая содержимое согласно модели Grid. - Table Values
Значения display позволяют сделать элементы, не являющиеся таблицами, похожими на элементы таблицы. Каждое из табличных значений заставляет элемент вести себя как соответствующий элемент таблицы в HTML. Значение inline-table ведёт себя как HTML-элемент<table>, но как строчный блок. Внутри блока таблицы находится контекст блочного уровня.
| Initial Value | - |
|---|---|
| Applies to | All elements. |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| DOM Syntax | object.style.display = "list-item"; |
Синтаксис
Синтаксис свойства CSS display
css
display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;Пример свойства display:
Пример свойства CSS display со значением inline
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.display li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body>
<h2>Пример свойства display</h2>
<p>Здесь элемент списка имеет своё начальное значение:</p>
<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<p>Здесь элемент списка используется со свойством display. Используется значение "inline":</p>
<ul class="display">
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
</body>
</html>Результат
Пример свойства display со значениями "inline" и "block":
Пример свойства CSS display со значениями inline и block
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inline {
border: 1px solid #1c87c9;
display: inline;
}
.block {
border: 1px solid #1c87c9;
display: block;
height: 30px;
width: 300px;
}
</style>
</head>
<body>
<h2>Пример свойства display</h2>
<p>Здесь элемент списка имеет значение "initial". Мы видим, что значение "inline" не принимает height и width:</p>
<span>Это какой-то текст.</span>
<span class="inline">Это другой текст.</span>
<hr />
<p>Здесь элемент списка используется со значением "block" свойства display:</p>
<span class="block">Это какой-то текст.</span>
<span class="block">Это другой текст.</span>
</body>
</html>Пример свойства display со значением "block":
Пример свойства CSS display со значением block
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.block {
display: block;
border: 1px solid #666;
background-color: #eee;
padding: 10px;
width: 200px;
}
.hello {
border: 1px solid #1c87c9;
background-color: #8ebf42;
padding: 10px;
}
</style>
</head>
<body>
<h2>Пример свойства display</h2>
<div class="block">
Lorem Ipsum — это текст-заглушка в полиграфии и наборе текста. Lorem Ipsum был стандартным текстом-заглушкой в отрасли с 1500-х годов, когда неизвестный печатник взял набор шрифтов и перемешал их, чтобы создать образец шрифта.
<div class="hello">HELLO!</div>
Он пережил не только пять веков, но и переход в электронный набор, оставаясь по сути неизменным.
</div>
</body>
</html>Пример свойства display со значением "contents":
Пример свойства CSS display со значением contents
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.contents {
display: contents;
}
.hello {
border: 1px solid #1c87c9;
background-color: #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Пример свойства display</h2>
<div class="contents">
Lorem Ipsum — это текст-заглушка в полиграфии и наборе текста. Lorem Ipsum был стандартным текстом-заглушкой в отрасли с 1500-х годов, когда неизвестный печатник взял набор шрифтов и перемешал их, чтобы создать образец шрифта.
<div class="hello">HELLO!</div>
Он пережил не только пять веков, но и переход в электронный набор, оставаясь по сути неизменным.
</div>
</body>
</html>Пример свойства display со значением "flex":
Пример свойства CSS display со значением flex
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#flex {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h2>Пример свойства display</h2>
<p>Здесь используется "display: flex;":</p>
<div id="flex">
<div style="background-color: #1c87c9;">1</div>
<div style="background-color: #666;">2</div>
<div style="background-color: #8ebf42;">3</div>
</div>
</body>
</html>Значения
| Value | Description | Play it |
|---|---|---|
| inline | Представляет элемент как строчный элемент. | Play it » |
| block | Представляет элемент как блочный элемент. | Play it » |
| contents | Сам элемент не создаёт блока, а его дочерние элементы размещаются так, как если бы они были непосредственными дочерними элементами родителя элемента. | Play it » |
| flex | Представляет элемент как блочный flex-контейнер. | Play it » |
| grid | Представляет элемент как блочный grid-контейнер. | Play it » |
| inline-block | Представляет элемент как строчный блочный контейнер. | Play it » |
| inline-flex | Представляет элемент как строчный flex-контейнер. | Play it » |
| inline-grid | Представляет элемент как строчный grid-контейнер. | Play it » |
| inline-table | Представляет элемент как строчную таблицу. Он ведёт себя как HTML-элемент <table>, но как строчный блок, а не как блочный блок. Внутри блока таблицы находится контекст блочного уровня. | Play it » |
| list-item | Элемент ведёт себя как HTML-элемент <li>. | Play it » |
| run-in | Представляет элемент как блочный или строчный в зависимости от контекста. | Play it » |
| table | Элемент ведёт себя как HTML-элемент <table>. | Play it » |
| table-caption | Элемент ведёт себя как HTML-элемент <caption>. | Play it » |
| table-column-group | Элемент ведёт себя как HTML-элемент <colgroup>. | Play it » |
| table-header-group | Элемент ведёт себя как HTML-элемент <thead>. | Play it » |
| table-footer-group | Элемент ведёт себя как HTML-элемент <tfoot>. | Play it » |
| table-row-group | Элемент ведёт себя как HTML-элемент <tbody>. | Play it » |
| table-cell | Элемент ведёт себя как HTML-элемент <td>. | Play it » |
| table-column | Элемент ведёт себя как HTML-элемент <col>. | Play it » |
| table-row | Элемент ведёт себя как HTML-элемент <tr>. | Play it » |
| none | Означает, что элемент вообще не будет показан. | Play it » |
| initial | Заставляет свойство использовать значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие существуют различные значения для CSS-свойства display, как указано в предоставленном URL?