30. La propiedad CSS display

La propiedad display es la propiedad CSS más importante para controlar el diseño. Especifica si/cómo se muestra 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 bloque (block) o en línea (inline).

Elementos block

Veamos algunos de los elementos HTML tipo block:

  • <div>
  • <h1>… <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Elementos inline

Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario. Este es un elemento <span> en línea dentro de un párrafo. Ejemplos 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 de visualización predeterminado

Como se mencionó, cada elemento tiene un valor de visualización predeterminado. Sin embargo, puedes anular esto. Cambiar un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer que la página se vea de una manera específica y seguir los estándares web. Un ejemplo común es crear elementos <li> en línea para menús horizontales.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
li {
	display:inline;
}
</style>

</head>
<body>
<p>Muestra una lista de enlaces en un menú horizontal</p>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Quienes somos</a></li>
	<li><a href="#">Contacto</a></li>	
</ul>
</body>
</html>

Nota: Establecer la propiedad de visualización de un elemento solo cambia la forma en que se muestra el elemento, NO el tipo de elemento que es. Entonces, un elemento en línea con display: block; no está permitido tener otros elementos de bloque dentro de él.

Ocultar un elemento – ¿display:none o visibility:hidden?

Se puede ocultar un elemento configurando la propiedad display en none. El elemento se ocultará y la página se mostrará como si el elemento no estuviera allí.

visibility: hidden; también oculta un elemento. Sin embargo, el elemento seguirá ocupando el mismo espacio que antes. El elemento estará oculto, pero aún afectará el diseño.

Scroll al inicio