display

<< Volver

Resumen

Esta propiedad especifica el tipo de caja de representación que se usará para un elemento. En un lenguaje como el HTML donde los elementos existentes tienen un comportamiento bien definido, los valores por defecto del la propiedad 'display' se toman de los comportamientos descritos en las especificaciones de HTML o de las hojas de estilo del navegador o el usuario. En lenguajes en los que el comportamiento de 'display' no está definido (como XML) el valor por defecto es: 'inline'.

Además de los muchos posibles valores permitidos para 'display', el valor "none" permite que hagamos invisible un elemento, siendo este un valor heredable, lo que hace que los elementos hijo también sean invisibles. En el árbol del documento, el elemento es inexistente. Este valor nos brinda grandes posibilidades, pero hay que usarlo con precaución.

• valor inicial: en línea
• Se aplica a: todos los elementos
• valor heredado: no
• Porcentajes: N/A
• Medio: visual
• valor calculada: como se ha especificado, excepto para elementos raíz, flotantes o con posición absoluta. (ver ???)

Sintaxis

display: <display-value> | inherit

Valores

<display-value> 

El valor de display puede ser uno cualquiera de los siguientes:

• inherit : Especifica el valor de este elemento igual que el de su elemento padre.

• none : Este valor desactiva la presentación del elemento (no tiene efecto en el formato); todos los elementos hijo son escondidos de forma incondicional. El documento es representado como si el elemento y sus hijos fueran inexistentes en el árbol del documento. Para hacer que un elemento forme parte de un documento, mientras que su contenido es invisible, vea la propiedad visibility.

• inline : Hace que el elemento genere uno o más elementos en la misma línea.

• block : Hace que el elemento genere una caja de bloque.

• inline-block : Valor introducido a partir de CSS 2.1. Hace que un elemento se represente como una caja seguida de forma fluida, por un contenido, como si formase parte de la misma caja.

• list-item : Hace que un elemento genere una caja para el contenido del elemento y una caja separada en la misma línea para los elementos de la lista.

• compact : Dependiendo del contenido, este valor crea bien un elemento caja o un elemento en línea. En cada caso se pueden aplicar distintas propiedades CSS a un elemento compacto. En un contenido de tipo caja, el elemento compacto será presentado en el margen izquierdo o a la derecho de la caja. El elemento compacto participa en el cálculo de los valores del ancho de línea para la línea corriente y del valor de la propiedad vertical-align del elemento caja.

• run-in : Dependiendo del contenido, este valor de la propiedad display, genera o bien un elemento caja o uno en línea. En cada caso se pueden aplicar distintas propiedades CSS a un elemento. Las propiedades de un elemento run-in, son heredadas de su elemento padre en el árbol del documento, no del elemento caja del que forma parte.

• table-header-group|table-footer-group : Este valor hace que el elemento se comporte de forma similar a las correspondientes instrucciones de tabla HTML: THEAD y TFOOT.

• table : Este valor hace que el elemento se comporte como un elemento HTML <table>.

• inline-table : Este valor no tiene una correspondencia directa en HTML.

• table-caption : Este valor hace que el elemento se comporte como un elemento HTML <caption>.

• table-row|table-row-group : Este valor hace que el elemento se comporte como un elemento HTML <tr>.

• table-cell : Este valor hace que el elemento se comporte como un elemento HTML <td>.

• table-column|table-column-group : Estos valores hacen que el elemento se comporte como elementos HTML <col> y <colgroup> respectivamente.

Ejemplos

Ver El Ejemplo Vivo

Ext/Doc: p  { display: block }
In-Line:  <p STYLE="display: block">text</p>

Notas

• Conformidad con CSS1: los navegadores pueden legalmente ignorar la propiedad 'display' y usar, en su lugar, los valores por defecto del navegador para cada elemento.
• El valor por defecto para esta propiedad era "block." En CSS2 este valor cambió a "inline".

Elementos en bloque o elementos en línea

• Elementos en bloque crean verticalmente distintos bloques de contenido (en el contexto visual) - generalmente usando saltos de línea antes y después del contenido. Sólo este valor permite generar elementos posicionados. Estos comportamientos son ilustrados por los elementos HTML BLOCKQUOTE, DIV, HEAD. Los valores de la propiedad display que crean un tipo de bloque de elemento son: block, list-item, table, compact y run-in

• Elementos en línea no crean distintos bloques de contenido; se muestra el contenido a partir de una caja de línea (el contenido es distribuido línea por línea dentro de un contenedor físico o virtual). Los elementos en línea son ilustrados por los elementos HTML tal como el formateado físico y virtual de los carácteres, imágenes no flotantes o contenido no marcado. Los valores de display que crean tipos de elementos en línea son: inline, inline-table, compact, run-in.

Especificaciones

• CSS 1
• CSS 2.1

Compatibilidad

Ver también

visibility, float, position