CSS от А до Я: свойство display

CSS от А до Я: свойство display

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством display.

D значит display

Есть несколько разных способов спрятать контент. Свойства display: none и visibility: hidden не одно и то же.

Свойство display: none не резервирует место под элемент на странице. Элемент удаляется из структуры, а занимаемое им место очищается.

Свойство visibility: hidden сохраняет место под элемент на странице. Элемент просто скрыт. Похожим образом работает свойство opacity: 0.

К примеру, код CSS ниже:

.display-test {
  display: none;
}
.vis-test {
  visibility: hidden;
}

Вместе с HTML ниже:

<div>
  <p>Lorem ipsum dolor sit amet ...</p> 
  <p class="display-test">Ut enim ad minim veniam ...</p>
  <p>Lorem ipsum dolor sit amet, consectetur ...</p> 
</div>
<div>
  <p>Lorem ipsum dolor sit amet ...</p> 
  <p class="vis-test">Ut enim ad minim veniam ...</p>
  <p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>

В демо ниже видно, чем отличается текст с классом .display-test от текста с классом .vis-test:

Обратите внимание на пустую строку во втором блоке. Второй параграф скрыт. В первом же блоке со свойством display: none под второй параграф место не выделяется.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree