MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Los resultados de tu búsqueda

    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.


    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 flotanteso contenido no marcado. Los valores de display que crean tipos de elementos en línea son: inline, inline-table, compact, run-in.

    Especificaciones

    Compatibilidad

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


    Valores soportados Navegador/es Resultado
    table-* Firefox
    compact Firefox No
    run-in Firefox No
    inline-block Firefox 3 / Gecko 1.9
    inline-table Firefox 3 / Gecko 1.9

    Ver también

    visibility, float, position



    Categorías

    Interwiki Languages

    Etiquetas y colaboradores del documento

    Contributors to this page: Scipion, Nathymig, Mgjbot, HenryGR, teoli, Lopez
    Última actualización por: teoli,