comparte el articulo 

CSS avanzado: la propiedad display (primera parte)

Actualizado el 05/10/2013 < > 5 Cometarios

Resumen: A pesar de ser una propiedad conocida, generalmente se encuentra subutilizada por parte de los diseñadores, muchas veces debido al desconocimiento de todo su potencial.

Mientras muchos diseñadores de páginas web siguen solicitando la implementación de una mayor cantidad de propiedades de CSS 3, la mayoría de ellos desconocen muchas de las utilidades que tienen algunas de las propiedades del actual CSS 2.1, y como consecuencia de ello las subutilizan.

Algunas de ellas, como en el caso de la propiedad display que comenzamos a analizar con este artículo, son utilizadas con frecuencia, pero en modo muy simple y sin que se comprenda muy bien no solo el alcance de la propiedad en si misma, sino que además se desconocen las posibilidades que ofrecen muchos de sus valores. La mayoría de los diseñadores apenas conocen el uso de tres o cuatro de estos valores.

Conceptos generales

Podría decirse que esta propiedad define el tipo de caja que genera un elemento. Todos los elementos generados en el HTML ocupan un espacio (aunque mediante el uso de la propiedad “float” puede hacerse que los elementos dejen de ocupar este espacio aunque permanezcan visibles) y pueden comportarse de muchas formas. Este comportamiento de los elementos y la forma en que se comportan respecto de los elementos adyacentes, está regido por la propiedad “display”.

Esta propiedad solo admite el uso de uno de los valores posibles. Estos valores son:  inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none e inherit, siendo su valor inicial “inline” y es aplicable a todos los elementos, sin que estos hereden la propiedad.

Display: none

Es la forma más simple que presenta esta propiedad, en la que se indica al elemento que no genere ninguna caja, con lo que el elemento simplemente desaparece. Como consecuencia de ello, el elemento deja de ocupar un espacio en la presentación del documento, por lo que los elementos adyacentes simplemente ignoran su presencia y ocupan su espacio.

Esto último es lo que la diferencia del valor “hidden” de la propiedad “visibility”, con la que el elemento deja de ser visible, pero continúa ocupando el espacio asignado, con el efecto consiguiente en los elementos adyacentes.

Este valor se le utiliza generalmente en el desarrollo de elementos dinámicos con javascript, además de poder utilizarse junto a pseudo-clases en el desarrollo de algunos efectos visuales que simulan efectos dinámicos exclusivamente desarrollados con HTML y CSS, como en el  siguiente ejemplo:

Menú desplegable

Display: block

Display block

<p class="bloque">Elemento con comportamiento en bloque</p>
<p class="bloque">Otro elemento que se comporta como bloque</p>
.bloque {
  padding: 10px;
  background: #ccc;
  display: block;
  }

Cuando un elemento es marcado con este valor de la propiedad “display”, el mismo se comporta como bloque. Este comportamiento como bloque quiere decir que:

  • El elemento no permitirá la ubicación de elementos adyacentes.
  • En caso de que sus dimensiones no sean determinadas, ocupará todo el ancho disponible dentro del elemento contenedor, y tendrá una altura que será determinada por el contenido.
  • Cuando se determina el ancho, el elemento ocupará solo la extensión determinada, pero sin permitir la ubicación de elementos adyacentes, aún cuando haya espacio suficiente para que se ubique en él otro elemento.

Display: inline

Display inline

<p class="linea">Elemento con comportamiento en línea</p>
<p class="linea">Otro elemento que se comporta en línea</p>
.linea  {
  padding: 10px;
  background: #ddd;
  display: inline;
  }

Los elementos cuya propiedad “display” tienen el valor “inline” se comportan como elementos en línea, lo que quiere decir que:

  • Estos elementos permiten la ubicación de elementos adyacentes.
  • No puede determinarse el ancho ni la altura de estos elementos, ya que como elementos en línea, las dimensiones de los mismos son determinadas por el contenido.

Display: inline-block

Display inline-block

<p class="linblock">Elemento con comportamiento en línea y en bloque</p>
<p class="linblock">Otro elemento que se comporta en línea y en bloque</p>
.linblock {
  padding: 10px;
  background: #f60;
  display: inline-block;
  width: 150px;
  }

Los elementos que tienen en su propiedad “display” este valor, tienen parte del comportamiento de los valores “inline” y “block”. Se comportan como si se tratara de elementos de bloque, pero que permiten la presencia de elementos adyacentes, lo que es propio de los elementos en línea. Las características de estos elementos son:

  • Permiten elementos adyacentes, como si se tratara de elementos en línea.
  • Pueden determinarse sus dimensiones, como los elementos de bloque.
  • Cuando no se determina su extensión, ocupan todo el espacio disponible, como sucede con los elementos de bloque.
  • La posición que ocupan estos elementos, es similar a los elementos en línea, lo que quiere decir que la parte inferior del elemento se apoyará en la base de la línea.

Display: list-item

Display list-item

<p class="lista">Elemento con comportamiento ítem de lista</p>
<p class="lista">Otro elemento que se comporta como ítem de lista</p>
.lista  {
  display: list-item;
  list-style-type: square;
  }

Este valor hace que el elemento se comporte como si se tratara de un ítem de lista, es decir, como si se tratara de un elemento <li>. Su comportamiento es exactamente igual que si se tratara de un ítem de lista, por lo que soporta las propiedades de este tipo de elementos, como “list-style”. Al igual que los ítems de lista, su comportamiento respecto de los demás elementos es similar a los elementos de bloque, por lo que no permite la presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Display: run-in

Display run-in

<p class="runin">Elemento con comportamiento ítem de lista</p>
<p class="bloque">Otro elemento que se comporta como ítem de lista</p>
.runin  {
  display: run-in;
  background: #6af;
  }

Este es uno de los valores que otorgan un comportamiento más difícil de comprender, ya que el mismo es variable dependiendo de los elementos adyacentes. También la implementación de este valor de la propiedad “display” puede resultar complicada por el hecho de que no todos los navegadores la muestran en forma correcta (en la actualidad, solo muestran los elementos en forma correcta los navegadores Google Chrome, Opera e Internet Explorer 8. Mozilla Firefox, ni siquiera en su versión 4 que está en fase beta, lo muestra correctamente).

De todas formas, a pesar de que es muy probable que debido al inconveniente generado por las diferencias entre los navegadores este valor sea muy pocas veces utilizado, daremos a conocer como funciona, ya que se encuentra dentro del estándar de W3C y su implementación debería ser posible en cualquier navegador.

Cuando un elemento cuya propiedad “display” tiene el valor “run-in” tiene a continuación un elemento cuya propiedad “display” tiene como valor “block”, el elemento se comporta como si el valor fuera “inline” y se ubica dentro del elemento con “display: block”. En los navegadores que no soportan este valor, ambos elementos se muestran como elementos de bloque y separados.

Para todos los demás casos, el elemento marcado con este valor se comporta como un elemento de bloque.

Otros valores

El resto de los valores de esta propiedad son aquellos que hacen que los elementos se comporten como si se tratara de tablas o como partes de ellas, como tablas, filas, columnas y celdas, o como grupos de ellas.

Dado que se trata de una cantidad importante de valores, explicaremos el comportamiento de los elementos marcados con ellos en el próximo artículo.

Publicado el 17/11/2010, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

5 Cometarios

  1. marjohn2

    Buena aporte bien explicado ..el concepto tecnico es lo que me gusto , por q la demas paginas te dicen que es lo que significa en tres lineas y eso les parece sufuciente.. este esta bueno.

    Miércoles, 27 de abril 2011

  2. Javier

    Excelente explicacion, sencilla y super util

    Viernes, 15 de julio 2011

  3. Alberto

    Estupendamente explicado. Planteo una duda, me gustaría saber si es posible conseguir que algo se visualice pero no tenga comportamiento de bloque. Vamos como el valor ‘none’ pero visualizando el elemento.

    Martes, 12 de marzo 2013

  4. Ibra

    Sublime.

    Sábado, 6 de julio 2013

  5. vero

    Me encantó la explciación, los ejemplos, lo teórico que muchas veces es lo que marca la diferencia entre uno y otro. Para mi la práctica si la teória no es nada. Y Viceversa tampoco.

    Sábado, 22 de febrero 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras