Свойство visibility используется для скрытия элементов.
При скрытии элемента при помощи свойства visibility, место, ранее им занимаемое, так и остается за ним, в отличие от значения none свойства display.
Это свойство применимо ко всем элементам.
Значение свойства visibility
- visible – элемент отображается,
- hidden – элемент скрыт, но оставляет за собой свое место,
- collapse- применяется для скрытия элементов таблицы. При этом таблица перестраивается с учетом отсутствующих элементов. При применении к другим элементам, результат аналогичен действию свойства при значении hidden,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- visible
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство visibility </title>
<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>
</head>
<body>
<p> Скроем следующий абзац. </p>
<p> Этот абзац будет скрыт - сделаем его невидимым. </p>
<p> А этот абзац останется на месте, не заняв место предыдущего. </p>
<table border width="500">
<caption align="center"> Скроем у этой таблицы вторую строку. </caption>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство visibility </title>
<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>
</head>
<body>
<p> Скроем следующий абзац. </p>
<p> Этот абзац будет скрыт - сделаем его невидимым. </p>
<p> А этот абзац останется на месте, не заняв место предыдущего. </p>
<table border width="500">
<caption align="center"> Скроем у этой таблицы вторую строку. </caption>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
</body>
</html>
Результат
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство visibility </title>
<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>
</head>
<body>
<p> Скрыли второй абзац. </p>
<p style="visibility: hidden;"> Невидимый абзац. </p>
<p> А этот абзац остался на месте, не заняв место скрытого абзац. </p>
<table border width="500">
<caption align="center"> Вторая строка скрыта - на ее месте третья. </caption>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr style="visibility: collapse;">
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство visibility </title>
<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>
</head>
<body>
<p> Скрыли второй абзац. </p>
<p style="visibility: hidden;"> Невидимый абзац. </p>
<p> А этот абзац остался на месте, не заняв место скрытого абзац. </p>
<table border width="500">
<caption align="center"> Вторая строка скрыта - на ее месте третья. </caption>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr style="visibility: collapse;">
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
</body>
</html>
Результат
