Layout - Propiedad Display

¿Qué nos permite?

La propiedad display nos permite definir cómo será mostrado un cierto elemento HTML.

De hecho, la propiedad display es una de las más complejas de CSS 2.1, ya que establece el tipo de la caja que genera cada elemento.

Posibles Valores

• inline - que se visualice como elemento de línea
• block - que se visualice como elemento de bloque
• inline-block - que se visualice como elemento con ancho y alto pero no genera salto de línea
• none - oculta el elemento, como si no existiera
• flex - modelo de cajas flexibles
• grid - modelo de cajas en cuadrículas

Display: none

¿Qué hace?

Hace que el elemento no genera ninguna caja. El resultado es que el elemento desaparece por completo de la página y no ocupa sitio, por lo que los elementos adyacentes ocupan su lugar.

Si se utiliza la propiedad display: none sobre un elemento, todos sus descendientes también desaparecen por completo de la página.

Cuidado: Cuando se especifica el valor “none” por defecto para elementos de contenido es importante, ya que la información que contienen no estará disponible para lectores de pantalla al cargar.

Display: block

¿Qué hace?

Se muestran como bloques independientes, causando un salto de línea antes y después de su declaración.

Por defecto ocupan el 100% del ancho del elemento que los contiene.

Elementos por defecto:

<div> 
<p> 
<blockquote> 
<h1-h6> 
<fieldset>
<form> 
<ol> 
<ul>

Display: inline

¿Qué hace?

Se muestran siguiendo la línea en la que se encuentran, y no empiezan en una nueva línea, ocupan solamente el espacio que está ocupado por su contenido.

Elementos por defecto:

<span>
<em>
<a>
<img>
<label>
<input>
<strong>

Nota: Un elemento de tipo bloque, nunca puede estar contenido en un elemento de línea. Viceversa, sí.

Display: list-item

¿Qué hace?

<li>

Generan una caja principal, y otra adicional para viñetas o caracteres alfanuméricos.

Display: inline-block

¿Qué hace?

El elemento tendrá un comportamiento mezcla entre los dos anteriores.

Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales.

Elemento por defecto:

<img>

Diagramación en Columnas con inline-block

vertical-align: baseline / sub / super / text-top / text-bottom / middle / top / bottom

Cuando usamos display: inline-block; podemos alinear múltiples elementos horizontalmente usando la propiedad vertical-align.