Showing and hiding (display) · Affichage et masquage (display)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
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.
Français
Comment les boîtes s'écoulent
- Certains éléments sont block (de bloc) : ils s'empilent les uns sur les autres et remplissent la largeur —
<div>,<p>,<h1>. - Certains sont inline (en ligne) : ils sont côte à côte, ne prenant que l'espace nécessaire —
<span>,<a>,<strong>. displayvous permet de changer la façon dont un élément se comporte.
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.
Français
display: none
display: none;supprime un élément de la page complètement.- C'est ainsi que les menus, les pop-ups et les sections « lire la suite » restent cachés jusqu'à ce qu'ils soient nécessaires.
- L'élément est toujours dans votre HTML — il est juste masqué.
<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.
Français
Erreurs courantes
display: nonesupprime l'élément et son espace ;visibility: hiddenconserve son espace.blockcommence une nouvelle ligne ;inlinene le fait pas.
English
Now you try
display: nonehides;display: blockmakes an element take its own line.- Hide one element, then change how another displays.
Français
À vous maintenant
display: nonecache ;display: blockforce un élément à prendre sa propre ligne.- Cachez un élément, puis changez la manière dont un autre s'affiche.
Hide the secret message. Add .secret { display: none; }. · Masquez le message secret. Ajoutez .secret { display: none; }.
Make each label sit on its own line. Add .label { display: block; }. · Faites en sorte que chaque étiquette soit sur sa propre ligne. Ajoutez .label { display: block; }.