Как скрыть элемент в CSS

4

CSS позволяет скрывать и отображаться любые элементы на странице. Рассмотрим возможные варианты.

visibility: hidden

Свойство visibility со значением hidden скрывает элемент со страницы. Однако место, которое элемент занимает, остается за ним.

<!DOCTYPE html>
<html>

<head>
  <title>Пример</title>
  <style>
    h1.hidden {visibility: hidden}
  </style>
</head>

<body>
  <h1>Это видимый заголовок</h1>
  <h1 class="hidden">Это скрытый заголовок</h1>
</body>

</html>

display: none

Свойство display со значением none скрывает элемент со страницы. При этом веб-страница отображается так, словно элемента и не было.

<!DOCTYPE html>
<html>

<head>
  <title>Пример</title>
  <style>
    h1.hidden {display: none}
  </style>
</head>

<body>
  <h1>Это видимый заголовок</h1>
  <h1 class="hidden">Это скрытый заголовок</h1>
</body>

</html>
Теги

🔥 You may also like