CSS від А до Я: властивість display

35

Від автора: вітаю вас в нашій серії уроків 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 нижче:

Lorem ipsum dolor sit amet …

Ut enim ad minim veniam …

Lorem ipsum dolor sit amet, consectetur …

Lorem ipsum dolor sit amet …

Ut enim ad minim veniam …

Lorem ipsum dolor sit amet, consectetur …

У демо нижче видно, чим відрізняється текст з класом .display-test від тексту з класом .vis-test:

Зверніть увагу на порожню рядок у другому блоці. Другий параграф прихований. У першому блоці з властивістю display: none під другий параграф місце не виділяється.