Showing and hiding (display) · Показ и скрытие (display)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
How boxes flow
- Some elements are block: they stack on top of each other and fill the width —
<div>,<p>,<h1>. - Some are inline: they sit side by side, taking only as much room as they need —
<span>,<a>,<strong>. displaylets you change which way an element behaves.
Русский
Как выстраиваются блоки
- Некоторые элементы являются блочными: они выстраиваются друг над другом и занимают всю ширину —
<div>,<p>,<h1>. - Некоторые являются строчными: они стоят рядом, занимая ровно столько места, сколько им нужно —
<span>,<a>,<strong>. displayпозволяет вам изменить поведение элемента.
English
display: none
display: none;removes an element from the page completely.- It's how menus, pop-ups, and "read more" sections stay hidden until needed.
- The element is still in your HTML — it just isn't shown.
Русский
display: none
display: none;полностью удаляет элемент со страницы.- Именно так меню, всплывающие окна и секции «Читать далее» остаются скрытыми до момента необходимости.
- Элемент всё ещё находится в вашем HTML-коде — он просто не отображается.
<style>
.pill { display: inline; background-color: #def; padding: 6px; }
.gone { display: none; }
</style>
<span class="pill">Visible</span>
<span class="gone">You can't see me</span>
English
Common mistakes
display: noneremoves the element and its space;visibility: hiddenkeeps its space.blockstarts a new line;inlinedoes not.
Русский
Распространенные ошибки
display: noneудаляет элемент и освобождаемое им место;visibility: hiddenсохраняет это место.blockначинает новую строку;inlineнет.
English
Now you try
display: nonehides;display: blockmakes an element take its own line.- Hide one element, then change how another displays.
Русский
Теперь попробуйте сами
display: noneскрывает;display: blockзаставляет элемент занять отдельную строку.- Скройте один элемент, затем измените отображение другого.
Hide the secret message. Add .secret { display: none; }. · Скройте секретное сообщение. Добавьте .secret { display: none; }.
Make each label sit on its own line. Add .label { display: block; }. · Заставьте каждую метку размещаться на отдельной строке. Добавьте .label { display: block; }.