Вы можете использовать свойство 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.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.