От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством display.
D значит display
Есть несколько разных способов спрятать контент. Свойства display: none и visibility: hidden не одно и то же.
Свойство display: none не резервирует место под элемент на странице. Элемент удаляется из структуры, а занимаемое им место очищается.
Свойство visibility: hidden сохраняет место под элемент на странице. Элемент просто скрыт. Похожим образом работает свойство opacity: 0.
К примеру, код CSS ниже:
|
1 2 3 4 5 6 |
.display-test { display: none; } .vis-test { visibility: hidden; } |
Вместе с HTML ниже:
|
1 2 3 4 5 6 7 8 9 10 |
<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
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
