Видимость элемента: visibility

visibility

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 4.0 1.0
Мобильные браузеры Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.0 1.0 6.0 6.0 1.0
Свойство
visibility — это свойство отвечает за видимость элемента на странице
Наследование
Наследуется. Это значит что стили применённые к родительскому элементу передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
visible | hidden | collapse | inherit
Значение по умолчанию
visible
Правила записи
свойство: значение;
Примеры
visibility: visible;

Предположим что в абзаце скрыто какое-то слово:

Это свойство отвечает за видимость элемента на странице

Теперь применим к этому слову свойство visibility со значением visible:

Это свойство отвечает за видимость элемента на странице

Нужно обратить внимание что для скрытого слова осталось место которое оно занимает

visibility: hidden;

Предположим что в абзаце нужно скрыть какое-то слово:

Это свойство отвечает за видимость элемента на странице

Теперь применим свойство visibility со значением hidden:

Это свойство отвечает за видимость элемента на странице

Нужно обратить внимание что для скрытого слова осталось место которое оно занимает

visibility: collapse;

Значение collapse применяется только к ячейкам таблицы, ячейка таблицы будет полностью удалена

Рассмотрим пример ниже:

К ячейке справа будет применено свойство visibility со значением collapse
visibility: inherit; Это значит что свойство унаследует значение от родителя
Поделиться