CSS свойство visibility

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

Свойство имеет следующие значения: visible, hidden и collapses.

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

Некоторые браузеры не используют значение "collapse".

Значение по умолчанию	visible
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Да
Версия	CSS2
DOM синтаксис	Object.style.visibility = "collapse";

Синтаксис

visibility: visible | hidden | collapse | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>             
      p {   	
      visibility:hidden;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства visibility.</h2>
    <div>Какой-нибудь текст.</div>
    <p>Текст, который не будет отображен в браузере.</p>
    <div>Вы видите пространство сверху от этого предложения, но на самом деле это текст, для которого установлено значение hidden.</div>
  </body>
</html>

Попробуйте сами!

Пример со значениями "visible" и "hidden":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .test1 {
      visibility: visible;
      }
      .test2 {
      visibility: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства visibility</h2>
    <p class="test1">Lorem Ipsum - это текст-"рыба".</p>
    <p class="test2">Lorem Ipsum - это текст-"рыба".</p>
    <p>В пространстве сверху находится скрытый текст.</p>
  </body>
</html>

Попробуйте сами!

Пример со значением "collapse":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .collapse {
      visibility: collapse;
      }
      table {
      border: 2px solid #666;
      }
      td {
      border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства visibility</h2>
    <p>Применено значение "collapse".</p>
    <table>
      <tr>
        <td>10</td>
        <td class="collapse">100</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>20</td>
        <td>200</td>
        <td>2000</td>
      </tr>
      <tr class="collapse">
        <td>30</td>
        <td>300</td>
        <td>3000</td>
      </tr>
      <tr>
        <td>40</td>
        <td>400</td>
        <td>4000</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
visible	Тег отображается. Значение по умолчанию.
hidden	Только визуально скрывает элементы.
collapse	Используется только с конкретными табличными элементами (строки, группы строк, колонки, группы колонок) для удаления всех строк и колонок. Имеет то же значение, что "hidden", если используется с другими элементами.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.