/ Курсы CSS / Свойство visibility

Свойство visibility


Свойство visibility

Свойство visibility определяет, элемент скрыт или виден. Значение к visibility:

visible - отображает элемент как видимый.
hidden - элемент становится прозрачным.
collapse - строки и колонки убираются, а таблица перестраивается по новой.
inherit - наследует значение родителя.

Пример использования:


 <style>
    #hidden {
      visibility: hidden;
    }
  </style>
  <div id="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
     nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.</p>
  </div>
  <div id="visible">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora 
    nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
nisi provident modipraesentium totam voluptas, doloribus rerum, minus accusantium.


Мы видем, что место остается если мы используем свойство visibility, но если мы вместо visibility поставим none,вот что будет:


 <style>
    #none {
      display: none;
    }
  </style>
  <div id="none">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
     nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.</p>
  </div>
  <div id="visible">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora 
    nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
nisi provident modi praesentium totam voluptas, doloribus rerum, minus accusantium.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus rem, ad tempora
nisi provident modipraesentium totam voluptas, doloribus rerum, minus accusantium.