Propiedad display en CSS

Una de las propiedades más importantes  a la hora de definir un layout es sin duda la propiedad display; Es por eso que en esta entrada profundizaremos un poco más sobre los tipos de display en CSS o lo que es lo mismo los diferentes valores que existen para la propiedad display.

La propiedad display define el tipo de caja que un elemento adoptará. Como vimos en una entrada anterior, algunos elementos por defecto están definidos con un tipo de display; Así por ejemplo el elemento < div >  es un elemento contenedor definido con la propiedad display block por defecto, y un elemento < span > es definido en su propiedad display con un valor inline. A continuación veremos solo los valores más básicos de la propiedad display dejando para futuras entradas los valores más complejos.



Propiedad display none

El atributo none en la propiedad display oculta el elemento, es decir que el elemento existe pero no es mostrado en el layout.
Es importante diferenciarlo de la propiedad visibility:hidden  que únicamente oculta el elemento, pero este es dispuesto dentro del layout, dejando así un espacio sin ocupar donde el elemento esta alojado. En cambio la propiedad  display:none aparte de ocultar el elemento visualmente, este no es dispuesto dentro del layout evitando así dejar el espacio del elemento sin ocupar.

Veamos el siguiente ejemplo, en el que tenemos tres párrafos...


 <p>Parrafo 1</p>
 <p>Parrafo 2</p>
 <p>Parrafo 3</p>

Con el siguiente resultado...

Parrafo 1

Parrafo 2

Parrafo 3

¿Y sí al párrafo dos le agregamos la propiedad visibility:hidden?


 <p>Parrafo 1</p>
 <p style='visibility:hidden'>Parrafo 2</p>
 <p>Parrafo 3</p>

Veamos que pasa...

Parrafo 1

Parrafo 2

Parrafo 3

El párrafo dos no se muestra, pero ahí está su espacio.
Pero sí ahora en vez de visibility:hidden agregamos display:none...


 <p>Parrafo 1</p>
 <p style='display:none'>Parrafo 2</p>
 <p>Parrafo 3</p>

El resultado...

Parrafo 1

Parrafo 2

Parrafo 3

El párrafo dos tampoco se muestra, pero como podemos ver no hay espacio en blanco donde se supone que debería estar el elemento. Esto es simplemente porque el elemento existe, pero no está dispuesto donde debería estar, gracias a la propiedad display:none.

Propiedad display block

Para la propiedad display, el atributo block propicia que el elemento inicie en una nueva línea ocupando todo el espacio posible sin importar su contenido, ocupará todo el espacio, relegando al siguiente elemento al espacio en el cual termina el elemento con el atributo block.

Propiedad display inline

Con el atributo inline de la propiedad display, un elemento ocupa solo el espacio que su contenido requiere, permitiendo el flujo del resto de elementos en la misma línea, en caso de que el resto de elementos sean similares. Por su calidad de elemento inline, a dicho elemento no es posible atribuirle valores de width y height, ni margenes verticales por lo mencionado anteriormente que solo toma el espacio que su contenido necesita.

Propiedad display inline-block

Este atributo como puede deducirse, es una combinación entre los tipos de display block e inline. Así pues un elemento inline-block fluirá con el texto y el resto de elementos, siempre y cuando estos otros lo permitan, respetando el ancho, alto y margenes verticales que hayan  sido definidas para el elemento.

Veamos de forma práctica lo antes mencionado. Recordemos que un elemento párrafo (<p>), por defecto está definido como un elemento de bloque (propiedad display:block), entonces supongamos que tenemos un fragmento de código con tres párrafos como el siguiente.


 <p>Parrafo 1</p>
 <p>Parrafo 2</p>
 <p>Parrafo 3</p>

El resultado sería el siguiente...

Parrafo 1

Parrafo 2

Parrafo 3

Vemos lo antes dicho, sin necesidad de especificar la propiedad display:block el párrafo ya contiene esa propiedad, ocupando todo el espacio aunque su contenido no lo requiera, provocando que el siguiente párrafo se desplace a la siguiente línea.

Y sí a estos elementos le agregamos la propiedad display:inline-block...


 <p style='display:inline-block'>Parrafo 1</p>
 <p style='display:inline-block'>Parrafo 2</p>
 <p style='display:inline-block'>Parrafo 3</p>

Esto es lo que pasa...

Parrafo 1

Parrafo 2

Parrafo 3

Notamos que en un elemento de bloque, cuando se le asigna la propiedad inline block, este, al no tener asignado un valor de ancho y alto, únicamente tomará el espacio que necesite su contenido.
Ahora veamos que pasa con los elementos inline. Tenemos tres elementos span...


 <span>span 1</span>
 <span>span 2</span>
 <span>span 3</span>

Con un pequeño código css como el siguiente, en el cual le añadimos un color de fondo, un ancho y un alto.


 span{
 background-color:#ccc;
 width: 40px;
 height:40px;
 }

Y el resultado...

span 1 span 2 span 3

Vemos que aunque los elementos span tienen definido un valor de ancho y de alto, este, no es asignado al elemento, debido a la propiedad display:inline.
Pero si ahora a esos elementos span le agregamos la propiedad display:inline-block;


 span{
 background-color:#ccc;
 width: 40px;
 height:40px;
 display:inline-block;/*Añadimos la propiedad*/
 }

Pasa esto...

span 1 span 2 span 3

Lo que pasa es lo que mencionamos anteriormente, la propiedad display inline-block es una mezcla entre inline y block, en este caso, como ahora tiene la propiedad inline-block y se ha definido un valor de ancho y de alto, estos valores y serán asignados a los elementos.

Por el momento aquí termina el post, pero en post futuros veremos otros atributos para la propiedad display, además de profundizar en el atributo inline-block.