Showing and hiding (display) · Mostrar y ocultar (display)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
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.
Español
Cómo fluyen las cajas
- Algunos elementos son en bloque: se apilan uno sobre otro y ocupan todo el ancho —
<div>,<p>,<h1>. - Otros son en línea: se sitúan uno al lado del otro, ocupando solo el espacio necesario —
<span>,<a>,<strong>. displayte permite modificar el comportamiento de un elemento.
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.
Español
display: none
display: none;elimina un elemento de la página por completo.- Es la forma en que menús, ventanas emergentes y secciones de "leer más" permanecen ocultos hasta que se necesitan.
- El elemento sigue estando en tu HTML — simplemente no se muestra.
<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.
Español
Errores comunes
display: noneelimina el elemento y su espacio;visibility: hiddenmantiene su espacio.blockinicia una nueva línea;inlineno lo hace.
English
Now you try
display: nonehides;display: blockmakes an element take its own line.- Hide one element, then change how another displays.
Español
Ahora prueba tú
display: noneoculta;display: blockhace que un elemento ocupe su propia línea.- Oculta un elemento y luego cambia cómo se visualiza otro.
Hide the secret message. Add .secret { display: none; }. · Oculta el mensaje secreto. Agrega .secret { display: none; }.
Make each label sit on its own line. Add .label { display: block; }. · Haz que cada etiqueta se sitúe en su propia línea. Agrega .label { display: block; }.