Display none display block: CSS Layout — The display Property

как скрыть элемент CSS или элемент HTML

2021-10-12

Свойства  display и visibility используются, чтобы вывести или скрыть элемент HTML или CSS. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div:

Мы используем три элемента div, которые показаны в разделе 1 (с левой стороны). Изначально все элементы div выводятся без применения свойств display или visibility.

Посмотреть онлайн демо-версию и код

Во второй части рисунка отображаются только div 1 и div 3. Для div 2 задано visibility: hidden, но мы все равно видим пространство, которое занимает этот элемент.

Посмотреть онлайн демо-версию и код

В третьем разделе также отображаются только div 1 и div 3, в то время как div 2 скрыт с помощью свойства HTML display none. Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.

Посмотреть онлайн демо-версию и код

• Синтаксис свойства CSS visibility
• Синтаксис свойства CSS display
• Пример применения свойства display для отображения / скрытия меню
• Демо-версия меню с использованием свойства visibility
• Пример использования свойства CSS visibility для HTML-таблицы
• Применение свойства CSS display к таблице
• Использование display для строчных элементов

Вот, как использовать свойство CSS visibility:

visibility: hidden;

Значение по умолчанию для свойства CSS visibility — visible. Также можно использовать:

visibility: collapse;

Данное значение используется в HTML-таблицах.

display: none;

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

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

display: inline;

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

display: block;

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

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

При клике по ссылке скрыть меню для события клика используется код JQuery, чтобы применить свойство display: none к родительскому элементу div:

Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility, чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery:

visibility: hidden

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible, и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display).

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap. Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger, active, warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

visibility: collapse;

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

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

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display, чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

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

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

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

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

• Родительский div очерчен черной рамкой и занимает всю доступную ширину;
• span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
• Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Вадим Дворниковавтор-переводчик статьи «CSS display and visibility: 6 examples to show/hide HTML elements»

Style display none что это

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

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

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

Значение block

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

Это значение display многие элементы имеют по умолчанию: <div> , заголовок <h2> , параграф <p> .

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span> , <a> .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

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

Как и инлайн-элемент:

• Располагается в строке.
• Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

• Элемент всегда прямоугольный.
• Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

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

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table> , <tr> , <td> и т.д. – это просто элементы с предопределёнными значениями display :

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

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

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

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

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h4 , благодаря display:run-in , окажется визуально внутри div :

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

display

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

Синтаксис

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Изучаем display CSS: свойства

display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block , inline CSS и none . Также часто используются table и inline block CSS . Новым и весьма полезным является значение flex , потому что оно было создано специально для разметки.

При рассмотрении свойства display нельзя не упомянуть дерево блоков . Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.

display css — свойства, которые мы уже достаточно хорошо знаем

Значения свойства display , которые мы постоянно используем — на самом деле сокращения. Например, block — сокращение от block flow . Полный список можно найти в спецификации .

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

display: none CSS

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

display inline

Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.

display: block CSS — что это?

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

display: list-item

Элемент, отображаемый, как элемент списка, ведет себя так же, блочный. Но также генерирует поле маркера, для которого могут быть заданы стили с помощью свойства list-style . Только элементы <li> по умолчанию имеют значение list-item . Данное значение используется для сброса элементов <li> на поведение по умолчанию.

display inline block — что значит в CSS?

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

Адаптивный пошаговый обработчик

Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет » ломался «.

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

Помните макеты на основе таблиц?

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

table	Соответствует HTML-элементу <table>. Определяет структурный блок.
table-header-group	Соответствует HTML-элементу <thead>.
table-row	Соответствует HTML-элементу <tr>.
display table-cell	Соответствует HTML-элементу <td>.
table-row-group	Соответствует HTML-элементу <tbody>.
table-footer-group	Соответствует HTML-элементу <tfoot>.
table-column-group	Соответствует HTML-элементу <colgroup>.
table-column	Соответствует HTML-элементу <col>.
table-caption	Соответствует HTML-элементу <caption>.
inline-table CSS	Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.

Новые виды блоков

Автор спецификаций Flexbox и Grid , сделал очень меткое замечание по поводу новых режимов отображения:

inline flex CSS предназначен для одномерных макетов, которые можно уложить в одну строку.

Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.

display: flex;

Введение режима flexbox или CSS Flexible Box , ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.

Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.

И когда появился CSS , мы перешли на плавающие макеты, вкладывая элементы в различные div , чтобы они обтекали и смещались, как нам нужно а . Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:

Объявляя для элемента display в CSS: flex , inline flex CSS , мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер , и flex-элементы имеют соответствующие им свойства.

Свойства для flex-контейнера

flex-direction — определяет главную ось и направление гибких элементов. Полный список значений flex-direction .
flex-wrap — указывает, должны ли flex-элементы настраиваться таким образом, чтобы поместиться в одну строку, или они могут быть перенесены на несколько строк. Полный список значений flex-wrap .
flex-flow — сокращенное свойство от flex-direction и flex-wrap . Полный список значений flex-flow .
justify-content — определяет, как распределяется вдоль главной оси пространство между и вокруг flex-элементов . Полный список значений justify-content .
align-items — определяет, как пространство между и вокруг flex-элементов распределяется перпендикулярно главной оси. Полный список значений align-items .
align-content — определяет, как линии flex-элементов распределены внутри контейнера. Не применяется, если элементы размещаются только в одной строке. Полный список значений align-content .

Свойства flex-элементов

order — указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS .
flex-grow — определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow .
flex-shrink — определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink .
flex-basis — определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis .
flex — сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex .
align-self — позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self .

display: grid;

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

Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox , эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML .

Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms- . Когда-то так было и с inline block CSS .

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

Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить « экспериментальные функции веб-платформы ». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled — true .

Основные термины CSS grid

Сеточный контейнер — аналогично концепции гибкого контейнера, применив к элементу ` display: grid; ` мы делаем его дочерние элементы сеточными элементами.

Сеточный элемент — если к родительскому элементу применено ` display: grid; ` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.

Трек сетки — это может быть либо столбец или ряд сетки.

Линия сетки — линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.

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

Пространство сетки — это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.

Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.

Малоизвестные и экспериментальные значения

display: run-in;

Устанавливает элемент как встроенный или блочный в зависимости от контекста.

display: ruby;

Для начала стоит представить элемент <ruby>. В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.

Существуют определенные общие черты между свойствами display: ruby и inline table CSS , но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста . Вместо этого лучше разметить контент с использованием HTML-элементов ruby , чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby .

ruby	Соответствует HTML-элементу <ruby>. Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки.
ruby-base	Соответствует HTML-элементу <rb>. Внутренний ruby-блок в ruby-контексте.
ruby-text	Соответствует HTML-элементу <rt>. Внутренний ruby-блок в ruby-контексте.
ruby-base-container	Соответствует HTML-элементу <rbc>. Внутренний ruby-блок в ruby-контексте.
ruby-text-container	Соответствует HTML-элементу <rtc>. Внутренний ruby-блок в ruby-контексте.

display: contents;

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

— CSS Display Level Модуль 3

Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents , он исчезнет из DOM . Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox . Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.

Заключение

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

Пожалуйста, опубликуйте свои отзывы по текущей теме материала. За комментарии, лайки, дизлайки, подписки, отклики огромное вам спасибо!

contents и его новые друзья спешат на помощь — CSS-LIVE

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

Годами для многих, казалось бы, элементарных задач приходилось выбирать решение по принципу меньшего из зол. Сейчас стало полегче благодаря флексбоксам, вот-вот станет еще легче благодаря гридам. Но все системы раскладки, даже самые передовые, упираются в фундаментальное ограничение: CSS привязывается к DOM-элементам. А значит, нельзя собрать вместе и красиво вывести в одном контейнере дочерние элементы разных DOM-предков — как бы удобно, красиво, логично и адаптивно это ни было.

Так вот: теперь можно освободить элементы из-под этого «DOMашнего ареста» и работать с элементами разных уровней вложенности как с непосредственными соседями. Правда, пока в Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags, добавлено 06.12.2017: а теперь еще и в Safari TP 45, добавлено 07.03.2018: и наконец в стабильном Chrome 65+ без флага!). Так что желательно открыть один из этих браузеров, чтобы увидеть примеры в действии.

Display:contents. Что это и откуда

Мы привыкли к простым значениям display: inline, block, inline-block. Теперь вот flex. Изредка еще table(-cell). Постоянные читатели нашего сайта вспомнят периодическую таблицу display, где их побольше — но даже там не было никакого contents. Откуда он вообще взялся?

Это значение описано в новой спецификации CSS Display module level 3. На момент выхода статьи по ссылке выше он был первым очень сырым черновиком, теперь же это солидная спецификация с минимумом красных пометок. Так что самое время взяться за нее — там вообще много нового и необычного. А про наше значение contents там сказано так:

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

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

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

Меню с логотипом в одном флекс-контейнере

Возможно, вы уже видели пример Джейка Арчибальда, в котором два потомка флекс-элемента благодаря display:contents для их родителя превращаются в самостоятельные флекс-элементы. Вот похожий пример, более приближенный к жизни:

See the Pen PZaxoK by Ilya Streltsyn (@SelenIT) on CodePen.

Здесь причуда дизайнера заставила нас вставить логотип между пунктами меню, и вся эта конструкция должна равномерно растягиваться с равными промежутками. Без display:contents нам пришлось бы либо запихивать логотип внутрь меню (прощай, семантика…), либо делить само меню на две части и «колдовать» с отступами. А с ним мы делаем пункты меню и логотип равноправными флекс-элементами, а дальше магия флексбоксов — включая изменение визуального порядка элементов — делает всё за нас сама!

Дерево-таблица

Часто бывает нужно представить в табличном виде иерархические данные, например, значения какого-то интегрального показателя и его разбивку по составляющим. Пример из нашей сферы — результаты разных браузеров в популярном тесте html5test.com: суммарные баллы по разделам спецификации и их «разбивка» по подразделам.

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

Иерархические структуры в HTML можно передавать с помощью вложенных списков. Что, если так и сделать, а табличное отображение придать с помощью CSS? Увы, табличная модель CSS унаследовала от HTML-таблиц не только структуру, но и ограничения: в боксе с display:table могут «жить» только table-*-group, а в тех — table-row. Было бы здорово, если бы table-row-group можно было вкладывать, но увы — алгоритм не разрешает. Вместо пропущенных элементов табличной иерархии достраиваются недостающие анонимные боксы, и получается обычная скучная вложенная таблица, лишенная главного табличного плюса — сквозной вертикальной связи по столбцам.

Но с display:contents эта задача решается в два счета (для примера приведено только начало таблицы):

See the Pen Demo of hierarchical data table using display:contents by Ilya Streltsyn (@SelenIT) on CodePen.

Мы просто сделали вид, что промежуточных уровней иерархии… нет вообще! И все строки таблицы (элементы p) подчинены главной таблице (обертке с class="table") напрямую. И все вертикальные связи сохранились!

Но вложенность никуда не исчезла — мы ведь не трогали DOM, мы лишь изменили display некоторых элементов. Поэтому мы по-прежнему можем, например, визуально разграничить элементы разных уровней отступами, основываясь на этой вложенности (в примере как раз это показано). Более того, теперь скрывать/раскрывать подуровни стало элементарно — как с обычным древовидным списком. Только обычно мы меняли display с none на block и обратно, а здесь — c none на contents и обратно. Не нужно больше циклами выискивать строки для скрытия по классам и т.п.! Удобно же, правда?

Решение проблемы подсеток в грид-раскладке

Отвязка визуальной структуры от DOM-структуры позволяет решить и ту проблему, на которую недавно сетовал Эрик Мейер в статье о грид-раскладке (мы как раз ее переводили): невозможность привязать элементы к гриду, создаваемому родителем их родителей. С display:contents это элементарно: как и в предыдущих примерах, с точки зрения визуальной структуры мы делаем так, что «дети» элемента не отображаются вообще, а его «внуки» отображаются так, как будто они «дети» — благодаря чему они автоматом подхватывают «магию» грид-раскладки, созданную внешним контейнером. В Firefox (либо Chrome c включенным флагом «Экспериментальные функции веб-платформы») можно увидеть это в действии.

Обратите внимание, что кода получается даже меньше, чем в решении Эрика с подсетками. Хак ли это? На мой взгляд — не больший, чем любая другая смена display на «неродное» значение. У многих задач бывает несколько правильных решений, и это — вполне стандартное применение стандартных средств языка. И уж точно не стоит откладывать выпуск практически готовой реализации грид-раскладки ради непременной реализации подсеток, когда есть такой изящный и наглядный обходной путь. В споре Эрика и Таба Аткинса лично я поддерживаю Таба. А вы что думаете?

Поддержка (и можно ли ее улучшить)

Надеюсь, сомнений в полезности новинки у вас не осталось, но поддержка браузерами пока всё портит. Единственное место, где для display:contents просматривается какая-никакая замена — это инлайновый контекст форматирования, в котором контейнеру можно поставить display:inline, что поместит его содержимое (напр. инлайн-блоки) в одну строку с содержимым его родителя. Это может подойти для редких и простых частных случаев вроде такого, но для самых «вкусных» применений — вроде примеров из статьи — к сожалению, такой замены не видно.

Остается лишь «теребить» разработчиков браузеров, чтобы они поскорее внедрили поддержку такого полезного значения (к тому же вряд ли сверхсложного в реализации). Проще всего, наверное, будет добиться этого от MS Edge. Пожалуйста, проголосуйте за поддержку этого свойства там!

Бонус: другие полезные новинки CSS Display level 3

Нужно сразу оговориться, что полезны они лишь в теории: в отличие от display:contents, они пока не поддерживаются нигде. Но такие многообещающие!

Первым я бы упомянул свойство box-supress. Помните, сколько мучений доставляла нам отмена display:none, особенно на этапе ученичества? Стоило лишь впопыхах поставить вместо него display:block строке таблицы или текстовому элементу, как вся верстка сыпалась как карточный домик. Это новое свойство обещает избавить от этих мучений навсегда. Оно позволит убирать элемент из верстки и возвращать обратно, не «забывая» о том, как он отображался прежде. На данный момент спецификация предлагает для него 3 значения: show — отображать как обычно, discard — скрыть напрочь (как при display:none), и hide — нечто совсем интересное: «отобразить, но не показывать» (построить визуальную структуру как обычно, со всеми размерами и т.

п. — но не выводить ее на экран!). Наверное, это последнее значение пригодится для динамического скрытия/показа элемента с анимацией.

Добавлено 22.02.2017. Cвойство box-supress решили отложить на следующий этап, на CSS Display Level 4. В нынешней спецификации его больше нет.

Не менее «революционное» изменение затронет и обычные значения свойства display, особенно те, которые сами «живут» в одном контексте форматирования, а внутри себя создают другой. Теперь и то и другое можно будет указывать явно и по отдельности — значение display:none разобьют на 2 отдельных ключевых слова, каждое из которых отвечает за «внешнюю» и «внутреннюю» стороны отображения элемента соответственно. А наши старые привычные «значения с дефисами» станут лишь псевдонимами для некоторых таких комбинаций. И появится еще одно полезное значение display:block flow-root

: оно наконец позволит решить проблему замены «clearfix-у» полностью, без издержек любого из существующих решений (добавлено 9. 05.2017: уже появилось!). Другой вопрос — будет ли это по-прежнему актуально, в эпоху повсеместной грид-раскладки:)

Так что закончим статью стандартным уже призывом читать спецификации:) И, конечно, делиться своими соображениями и находками в комментариях!

P.S. Это тоже может быть интересно:

Отображение CSS

— TutorialBrain

CSS Display

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

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

Свойство display  определяет, как браузер будет отображать элемент.

Существует 5 важных Дисплей . content , flex , grid и т. д., которые подробно описаны в соответствующих статьях.

1. Дисплей встроенный

Как следует из названия, встроенных элементов — это те элементы, которые продолжаются в потоке текста.

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

Синтаксис Display Inline :
display: inline ;

Некоторые из элементов, которые являются встроенными элементами, составляют

• — он ведет себя как .
• — это тег ввода для полей формы ввода

Мы только что добавили display: inline  , чтобы показать пример. В реальном проекте вы можете пропустить это для встроенных элементов.

Лучший способ использовать свойство display: inline  – , если вы хотите переопределить элемент, который не является встроенным элементом.

Пример встроенного отображения

 span {
 поле: 5px;
 дисплей: встроенный;
}
 

Примечание/Информация/Успех Здесь мы намеренно установили значения ширины и высоты, просто чтобы показать, что это не будет иметь никакого значения для встроенных элементов.

Удалите значения ширины и высоты, и вы не заметите разницы в выводе.

2. Блок отображения

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

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

Синтаксис блока отображения:
отображение: блок ;

Некоторые из элементов, которые являются блоками  элементов –

• • ,
    ,
    ,
    , < H5> ,

  • <Форма>
  • <Итоглетка>
  • 9003 как display:block , поскольку они уже являются элементами block , хотя вы все равно можете закодировать их, если хотите.

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

    Пример блока дисплея

     раздел {
     ширина: 50 пикселей;
     поле: 5px;
     высота: 50 пикселей;
     дисплей:блок;
     выравнивание текста: по центру;
     фон: ярко-розовый;
     граница: 2px сплошной черный;
    }
     

    3.

    Display inline-block

    Элементы inline-block имеют некоторое поведение, аналогичное inline-элементам , в том смысле, что они продолжают поток текста, но немного отличаются от

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

    В отличие от элементов блока , это не разбивается на новую строку, а проходит нормально.

    Синтаксис Display inline-block ​:
    display: inline-block ;

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

    Пример встроенного блока отображения

     изображение {
      ширина: 200 пикселей;
      поле: 5px;
      высота: 200 пикселей;
      дисплей: встроенный блок;
    }
     

    Давайте сравним результат display: inline

     с display:inline-block .

    Пример отображения встроенного VS встроенного блока ​

     .val1 {
     ширина: 50 пикселей;
     поле: 5px;
     высота: 50 пикселей;
     отступ: 10 пикселей;
     дисплей: встроенный;
     выравнивание текста: по центру;
     фон:#398CFE;
     граница: 2px сплошной черный;
    }
    .val2 {
     ширина: 50 пикселей;
     поле: 5px;
     высота: 50 пикселей;
     отступ: 10 пикселей;
     дисплей: встроенный блок;
     выравнивание текста: по центру;
     фон:#398ДОВСЕ;
     граница: 2px сплошной черный;
    }
     

    Точно так же мы сравним результат display:inline с display:block .

    Пример отображения встроенного блока VS

     .navbar {
     текстовое оформление: нет;
     ширина: 400 пикселей;
     дисплей: встроенный;
     отступ: 10 пикселей;
     размер шрифта: 20 пикселей;
     белый цвет;
     фон: малиновый;
    }
    
    .navbar1 {
     текстовое оформление: нет;
     ширина: 400 пикселей;
     дисплей:блок;
     отступ: 10 пикселей;
     размер шрифта: 20 пикселей;
     белый цвет;
     фон: малиновый;
    }
     

    4.

    Отображение Нет

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

    Синтаксис отображения Нет:
    отображение: нет ;

    отображение: нет VS видимость: скрыто

    отображение: нет гарантирует, что элемент не отображается. Он также удаляет выделенное пространство для элемента.

    visibility:hidden скрывает элемент, но не удаляет дополнительное пространство скрытого элемента.

    Итак, если вы хотите сохранить дополнительное пространство, используйте свойство visibility:hidden , иначе используйте свойство display:none .

    Пример Display VS Visibility

     .display-hidden {
     видимость: скрытая;
    }
    
    .display-нет {
     размер шрифта: 20 пикселей;
     дисплей: нет;
    }
     

    5. Отображение таблицы

    Свойства —

    • отображение: таблица — позволяет элементу вести себя как таблица (аналогично элементу )
      display: table-column — позволяет элементу вести себя как столбец таблицы (аналогично элементу
      )
      display: table-row — разрешает чтобы элемент вел себя как строка таблицы (аналогично элементу
      )
      display: table-column-group  – позволяет элементу вести себя как группа столбцов таблицы (аналогично элементу
      )
      display: table-row-group — позволяет элементу вести себя как группа строк таблицы (аналогично элементу
      )
      display: table-header-group — Позволяет элементу вести себя как заголовок таблицы (аналогично элементу
      )
      display: table-footer-group — позволяет элементу вести себя как нижний колонтитул таблицы (аналогично элементу <фут> )
      display: table-cell

      — позволяет элементу вести себя как ячейка таблицы (аналогично элементу

      )

      Пример таблицы отображения

       . mainsection {
 дисплей: таблица;
}

п {
 маржа: 0;
 граница: 1px сплошной серый;
 отступ: 5px 10px 5px 10px;
}
 

      Display Contents

      display:contents позволяет отображать текстовое содержимое, в то время как содержащий его контейнер исчезает.

      Синтаксис отображения содержимого:
      отображение: содержимое ;

      Пример содержимого дисплея

       .main-display {
 граница: 2px сплошной зеленый;
 фон: зеленый;
 отступ: 20 пикселей;
 ширина: 300 пикселей;
 дисплей: содержимое;
}

.contents-val {
 отступ: 5px;
 фон: золото;
 граница: 2px сплошной черный;
}
 

      Display Flex

      Чтобы создать 1 размерный макет вашего веб-сайта, вы можете использовать Flex .

      Чтобы отобразить родительский контейнер как гибкий, вы должны указать display: flex  в родительском контейнере.

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

      Пример дисплея Flex

       .div-flex {
 дисплей: гибкий;
}

.flex-вал {
 отступ: 5px;
 фон: небесно-голубой;
 граница: 2px сплошной черный;
}
 

      Сетка дисплея

      Чтобы создать 2  размерных макетов вашего веб-сайта, вы можете использовать Grid .

      Чтобы отобразить родительский контейнер как сетку, вы должны указать display: grid в родительском контейнере.

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

      Пример сетки отображения

       .maindiv {
 дисплей: сетка;
}

.div-val {
 отступ: 5px;
 фон: золото;
 граница: 2px сплошной черный;
}
 

      Фейсбук Твиттер Гугл плюс

      tachyons-display / Макет / Документы / ТАХИОНЫ

      Дисплей

      Одноцелевые классы для настройки отображения элемента в любой точке останова.

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

      Примеры

      Блок отображения

      .db { display: block; } <промежуток>

      Блок по своей природе установит ширину равной 100% родительского элемента. Это также приведет к разрыву строки, даже если объявленная ширина не занимает полную ширину родителя.

      блок

      блок

      Display Inline-Block

      . dib { display: inline-block; } <промежуток>

      Inline-block будет обтекать содержимое внутри строки. Это также позволяет вам установить свойства высоты и ширины элемента, которые не позволяют отображать встроенные Вам делать. Он отображает пробелы между элементами, поэтому, если вы установите ширина: 25% до четырех элементов, они не будут просто отображаться как макет из 4 столбцов дефолт.

      дисплей: встроенный блок

      дисплей: встроенный блок

      дисплей: встроенный блок

      дисплей: встроенный блок

      Отображение встроенное

      .di { отображение: встроенное; } <дел>

      Установите встроенный контент. Inline не учитывает значения высоты или ширины. Он не отображает пробелы между элементами.

      отображение: встроенное

      отображение: встроенное

      отображение: встроенное

      отображение: встроенное

      Отображение таблицы

      . dt { отображение: таблица; }
.dtc { display: table-cell; }

        

        

      Таблица отображения может быть объединена с ячейкой таблицы отображения для отображения таблицы. без разметки таблицы. Это может быть полезно для вертикального выравнивания контента. или для автоматического вычисления переменного количества ячеек таблицы. Для автоматического расчета даже ширины для всех ячеек, вы должны расширить таблицу отображения с помощью .dt - фиксированный для установки раскладка таблицы: исправлена.

      отображение

      таблица

      автоматически

      вычисление ширины ячейки

      отображение таблицы

        

        

      таблица отображения

      с макетом таблицы: исправлено

      автоматически

      сделает каждую ячейку одинаковой ширины независимо от содержимого } <дел>

      Вы можете установить отображение любого элемента на none, прикрепив класс dn .

      Предыдущий

      Clearfix

      Следующий

      Ширина

      Артикул

      MDN — Размер коробки

      тахионы-дисплей

      v5.0.5 305 Б

      Декларации

      52

      Селекторы

      48

      Макс. Оценка специфичности

      10

      Размер среднего размера Правило

      1.0833333333333333

      источник/_display.css

      /*
   ОТОБРАЖАТЬ
   Документы: http://tachyons.io/docs/layout/display
   База:
    д = дисплей
   Модификаторы:
    п = нет
    б = блок
    ib = встроенный блок
    это = встроенная таблица
    т = таблица
    tc = ячейка таблицы
    t-строка = таблица-строка
    t-columm = таблица-столбец
    t-column-group = таблица-столбец-группа
   Расширения медиазапроса:
     -ns = не маленький
     -м = средний
     -л = большой
*/
. dn { дисплей: нет; }
.di { дисплей: встроенный; }
.db { дисплей: блок; }
.dib { дисплей: встроенный блок; }
.dit {отображение: встроенная таблица; }
.dt { дисплей: таблица; }
.dtc {отображение: таблица-ячейка; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
  Это установит таблицу на полную ширину, а затем
  все ячейки будут одинаковой ширины
*/
.dt -- исправлено {
  макет таблицы: фиксированный;
  ширина: 100%;
}
@media (--точка останова-не-маленький) {
  .dn-ns { отображение: нет; }
  .di-ns { дисплей: встроенный; }
  .db-ns { дисплей: блок; }
  .dib-ns { дисплей: встроенный блок; }
  .dit-ns { дисплей: встроенная таблица; }
  .dt-ns { дисплей: таблица; }
  .dtc-ns { display: table-cell; }
  .dt-row-ns { display: table-row; }
  .dt-row-group-ns { display: table-row-group; }
  .dt-column-ns { display: table-column; }
  .dt-column-group-ns { display: table-column-group; }
  . dt--fixed-ns {
    макет таблицы: фиксированный;
    ширина: 100%;
  }
}
@media (--точка останова-среда) {
  .dn-m { отображение: нет; }
  .di-m { дисплей: встроенный; }
  .db-m { дисплей: блок; }
  .dib-m { дисплей: встроенный блок; }
  .dit-m { дисплей: встроенная таблица; }
  .dt-m { отображение: таблица; }
  .dtc-m {отображение: таблица-ячейка; }
  .dt-row-m { display: table-row; }
  .dt-row-group-m { display: table-row-group; }
  .dt-column-m { display: table-column; }
  .dt-column-group-m { display: table-column-group; }
  .dt--fixed-m {
    макет таблицы: фиксированный;
    ширина: 100%;
  }
}
@media (--breakpoint-large) {
  .dn-l {отображение: нет; }
  .di-l { дисплей: встроенный; }
  .db-l { дисплей: блок; }
  .dib-l { дисплей: встроенный блок; }
  .dit-l {отображение: встроенная таблица; }
  .dt-l {отображение: таблица; }
  .dtc-l {отображение: таблица-ячейка; }
  .dt-row-l { display: table-row; }
  .dt-row-group-l { display: table-row-group; }
  .dt-column-l { display: table-column; }
  . dt-column-group-l { display: table-column-group; }
  .dt--fixed-l {
    макет таблицы: фиксированный;
    ширина: 100%;
  }
}

 

      Отображение CSS — бесплатный учебник для изучения HTML и CSS

      Мы видели, что в основном существует 2 типа HTML-элементов: блочных элементов и встроенных элементов. Мы также упомянули несколько альтернатив, таких как list-item или table-cell .

      Свойство отображать позволяет изменить тип элемента HTML. По умолчанию абзац

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

       p{ display: inline;} 

      Почему бы тогда не использовать встроенный HTML-элемент, например

      ?

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

      Короче говоря, дисплей позволяет изменить тип элемента без изменения своего значения .

      Каждый параметр дисплея имеет определенное поведение рендеринга:

      • блок займет всю доступную ширину
      • встроенный будет действовать как обычный текст
      • встроенный блок , как следует из названия, представляет собой смесь блочного и встроенного поведения, «лучшее из обоих миров» опция
      • элемент списка аналогичен блоку , так как он занимает всю доступную ширину, но показывает дополнительный маркер
      • table , table-row и table-cell имеют очень специфическое, хотя и неожиданное поведение, позволяющее создавать более интересные макеты

      дисплей: блок

      Это превратит любой элемент в элемент блока .

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

       .menu a{ фон: красный; цвет: белый;} 

       

  

    Главная
  
  

    Возможности
  
  

    Цены
  
  

    О нас
  
 

      • Дом
      • Функции
      • Цены
      • О

      Если мы превратим эти ссылки в блоков , мы увеличим их целевую область:

       .menu a{ фон: красный; белый цвет; дисплей: блок;} 

      • Дом
      • Функции
      • Цены
      • О

      Дисплей

      : встроенный

      Это превращает любой элемент в встроенных элементов, как если бы они были просто текст .

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

       <ул>
  

    Главная
  
  

    Возможности
  
  

    Цены
  
  

    О нас
  
 

      • Дом
      • Функции
      • Цены
      • О

       .menu li{ display: inline;} 

      • Дом
      • Функции
      • Цены
      • О

      дисплей: элемент списка

      Единственными элементами HTML, отображаемыми как элемент списка , являются (что неудивительно) элементов списка

      , а также описаний определений <дд> .

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

      ) или с возрастающим номером (если в упорядоченном списке
      ).

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

      1. обычно отображаются как display: block 9Дисплей 0521 или : встроенный , так как они более гибкие для стиля.

         дисплей: нет

         Применение дисплея : нет; в элемент HTML удаляет его с вашей веб-страницы, как если бы он никогда не существовал в вашем коде.

          .gone-baby-gone{ display: none;} 

          
   Я слышал, как кто-то говорит??
   Хахахахаха
   Должно быть, мне снится...
    

         Я слышал, как кто-то говорит??

         Должно быть, я сплю...

         В коде 3 абзаца, но появляются только 2, как будто 2-го и не было.

         видимость: скрыто

         Свойство CSS видимость немного похоже на отображение . Применение видимости : скрыто; скрывает элемент с вашей страницы, но только делает его невидимым : он по-прежнему занимает место, которое должен был занимать.

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

         Ваш адрес email не будет опубликован. Обязательные поля помечены *

         Комментарий *

         Имя *

         Email *

         Сайт

      ) display: table-caption — позволяет элементу вести себя как заголовок таблицы (аналогично элементу