mozilla
Los resultados de tu búsqueda

    display

    Sumario

    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.

     

    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 evita la presentación del elemento (no tiene efecto en el formato); todos los elementos hijo dejan de aparecer de forma incondicional. En el árbol del documento, el elemento es inexistente. Para hacer que un elemento forma 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 el list-item.
    • 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 compact. En un contenido de tipo caja, el elemento compact será presentado en el margen izquierdo o a la derecho de la caja. El elemento compact participa en el cálculo de los valores de 'line-height' para la línea y del valor de la propiedad 'vertical-align' del elemento caja.
    • run-in : Dependiendo del contenido, este valor de la propiedad 'display', genera bien un elemento caja o un elemento 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 un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.
    • inline-table : Este valor hace que el elemento se comporte un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.
    • table-caption : Este valor hace que el elemento se comporte un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.
    • table-cell : Este valor hace que el elemento se comporte un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.
    • table-row|table-row-group : Este valor hace que el elemento se comporte un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.
    • table-column|table-column-group : Este valor hace que el elemento se comporte un elemento de tabla HTML de donde estos valores toman su nombre. El valor 'inline-table' no tiene una correspondencia directa en HTML.

    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 "Block" contra "In-line"
    • Elementos tipo "Block" crean bloques de contenido separados verticalmente (en el contexto visual) - generalmente usando un salto de línea antes y despues del contenido. Este es el único valor permitido para elementos con posición fija. El comportamiento de los elementos de bloque es el que prentan los elementos HTML como BLOCKQUOTE, DIV, cabeceras. Los valores de la propiedad 'display' que generan un elemento de tipo bloque/caja son: 'block', 'list-item', 'table, 'compact' y 'run-in.
    • Elementos tipo "In-line" no crea bloques de contenido separados; el contenido de los elementos es presentado en una misma línea (el contenido es presentado línea a línea en un mismo contenedor físico o bloque virtual). El comportamiento de los elementos 'in-line' es el que tienen los elementos HTML como los caractéres de escritura, caracteres especiales, imágenes no flotantes y contenido sin etiquetas. Los valores de la propiedad 'display' que crean elemento 'in-line' son: 'inline', 'inline-table', 'compact' y 'run-in'.

    Specificaciones

    Compatibilidad entre navegadores

    Navegador Versión mínima
    Internet Explorer 4
    Netscape 4
    Opera 3.5

    Los valores table-* están soportados por Firefox y ???.

    Los valores compact y run-in no están soportados por Firefox. Están soportados por ???.

    Los valores inline-block y inline-table se empiezan a soportar en Firefox 3 / Gecko 1.9. Los valores inline-block y and inline-table están también soportados por ???.

    Ver tambien

    visibility, float, position

    Etiquetas y colaboradores del documento

    Etiquetas: 
    Contributors to this page: HenryGR, fscholz
    Última actualización por: fscholz,