Вы можете использовать свойство visibility, чтобы контролировать визуальную видимость элемента на странице. Это свойство может принимать одно из следующих значений, перечисленных в таблице ниже:
| Значение | Описание |
|---|---|
visible |
Элемент отображается как видимый. Это значение установлено по умолчанию. |
hidden |
Элемент и его содержимое невидимы, но элемент остается в DOM-дереве документа. |
collapse |
Только для определенных внутренних объектов таблицы: строки (rows), группы строк (row groups), столбцы (columns) и группы столбцов (column groups). Он скрывает объекты, но никак не влияет на макет таблицы. Пространство, занимаемое объектом таблицы, будет заполнено последующими элементами таблицы |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента visibility. |
Значение visibility: collapse; удаляет внутренние элементы таблицы, но это никак не влияет на макет таблицы. Пространство, обычно занимаемое элементами таблицы, будет заполнено последующими элементами.
Если правило visibility: collapse; указать для других элементов, не для элементов таблицы, оно вызовет то же поведение, что и hidden.
Разница мажду свойствами visibility и display
CSS-свойства display и visibility на первый взгляд кажутся одинаковыми, но на самом деле имеют ряд отличительных особенностей.
visibility: hidden;скрывает элемент, но все равно занимает место в макете. Дочерний элемент скрытого поля будет видимым, если егоvisibilityустановлена какvisible.display: none;полностью удаляет элемент из документа. Он не занимает места, хотя HTML-код для него все еще находится в дереве. У всех дочерних элементов также отключено отображение, даже если их свойствоdisplayустановлено на что-то отличное отnone.
