La propiedad
displayes la propiedad CSS más importante para controlar el diseño.
La propiedad display
La propiedad display especifica si/cómo se debe mostrar un elemento.
Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es: block o inline.
Elementos en bloque
Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como sea posible).
Ejemplo de elementos de nivel bloque:
<div><h1>-<h6><p><form><header><footer><section>
Elementos en línea
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
Ejemplo de elementos en línea:
<span><a><img>
Display none
display: none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos ni volver a crearlos.
El elemento <script> usa display: none; por defecto.
Anular el valor predeterminado
Como se mencionó, cada elemento tiene un valor display predeterminado. Sin embargo, puedes anular esto.
Un ejemplo común es crear elementos <li> para menús horizontales:
Ejemplo:
Nota: Establecer la propiedad
displayde un elemento solo cambia la forma en que se muestra el elemento, NO qué tipo de elemento es. Entonces, un elemento en línea condisplay: block;no está permitido tener otros elementos de bloque dentro de él.
El siguiente ejemplo muestra elementos <span> como elementos de bloque:
Ejemplo:
El siguiente ejemplo muestra elementos <a> como elementos de bloque:
Ejemplo:
Ocultar un elemento
Se puede ocultar un elemento estableciendo la propiedad display: none;. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allí:
Ejemplo:
La propiedad visibility: hidde; también oculta un elemento.
Sin embargo, el elemento reservará su espacio. El elemento estará oculto, pero aún afectará el diseño:
Ejemplo:
Todas las propiedades display
| Propiedad | Descripción |
display | Especifica cómo se debe mostrar un elemento. |
visibility | Especifica si un elemento debe ser visible o no. |
Resumen
La propiedad CSS display es importante para controlar el diseño de un elemento HTML. Los elementos de nivel de bloque comienzan en una nueva línea y ocupan todo el ancho disponible, mientras que los elementos en línea no comienzan en una nueva línea y solo ocupan el ancho necesario. La propiedad display: none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin eliminarlos ni volver a crearlos. La propiedad visibility: hidden; también oculta un elemento, pero el elemento aún afecta el diseño. Hay otras propiedades de display y visibility disponibles.
Traducido con 💚 desde W3Schools.com