Visualización: Propiedades "display" y "visibility"

Las propiedades display y visibility controlan la visualización de los elementos. Las dos propiedades permiten ocultar cualquier elemento de la página.

Habitualmente se utilizan junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o imágenes cuando el usuario pincha sobre ellos.

Diferencias entre "display" y "visibility"

La diferencia entre ambas propiedades es que, mientras display oculta por completo un elemento haciendo que los demás elementos ocupen su lugar, la propiedad visibility hace que los otros elementos que componen la página respeten la posición de éste y reserven su espacio.

La siguiente imagen muestra la diferencia entre ocultar la caja número 5 mediante la propiedad display o hacerla invisible mediante la propiedad visibility:

La propiedad display es mucho más utilizada que visibility, pues normalmente no desea reservarse el espacio de contenido oculto.

La propiedad "display"

Las posibilidades de la propiedad display son mucho más avanzadas que simplemente ocultar elementos. En realidad, la propiedad display modifica la forma en la que se visualiza un elemento.

Los valores más utilizados son inline, block y none:

- display: block: Muestra un elemento como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate.

- display: inline: Visualiza un elemento en forma de elemento en línea, independientemente del tipo de elemento que se trate.

- display: none: Oculta un elemento y hace que desaparezca de la página. Como se ha dicho anteriormente, el resto de elementos de la página se visualizan como si no existiera el elemento oculto, es decir, pueden ocupar el espacio en el que se debería visualizar el elemento.

El siguiente ejemplo muestra el uso de la propiedad display para mostrar un elemento de bloque como si fuera un elemento en línea y para mostrar un elemento en línea como si fuera un elemento de bloque:

El código asociado sería el siguiente:

.en-linea{display: inline;} .bloque{display: block;}
<div>DIV normal</div>
<div class="en-linea">DIV con display:inline</div>
<a href="#">Enlace normal</a>
<a href="#" class="bloque">Enlace con display:block</a>

La propiedad display: inline se puede utilizar en las listas (<ul>, <ol>) que se quieren mostrar horizontalmente y la propiedad display: block se emplea frecuentemente para los enlaces que forman el menú de navegación.

La propiedad "visibility"

Visibility es una propiedad mucho más sencilla que display, pues sus posibilidades son mucho más limitadas y únicamente permite hacer visibles o invisibles los elementos de una página.

Los valores posibles para visibility son:

- visibility: normal: Es el valor por defecto.

- visibility hidden: convierte una caja en invisible para que no muestre sus contenidos. El resto de elementos de la página se muestran como si la caja todavía fuera visible, por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío

- visibility: collapse: sólo se puede utilizar en las filas, grupos de filas, columnas y grupos de columnas de una tabla. Su efecto es similar al de la propiedad display, ya que oculta completamente la fila y/o columna y se pueden mostrar otros contenidos en ese lugar. Si se utiliza el valor collapse sobre cualquier otro tipo de elemento, su efecto es idéntico al valor hidden.

 


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO