display

  • Enlace amigable (slug) de la revisión: CSS/display
  • Título de la revisión: display
  • Id de la revisión: 94804
  • Creada:
  • Creador: Mgjbot
  • ¿Es la revisión actual? No
  • Comentario robot Añadido: [[zh-cn:CSS:display]] <<langbot>>

Contenido de la revisión

{{template.CSSRef()}}

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.


  • {{template.Xref_cssinitial()}}: {{template.Cssxref("inline")}}
  • Aplicable a: todos los elementos
  • {{template.Xref_cssinherited()}}: no
  • Porcentajes: N/A
  • Medio: {{template.Xref_cssvisual()}}
  • {{template.Xref_csscomputed()}}: como se ha especificado, excepto para elementos raíz, elementos floated, y elementos absolutely positioned (ver???)

Sintaxis

display: <display-value> | {{template.Cssxref("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. {{template.Fx_minversion_inline(3)}}
  • 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. {{template.Fx_minversion_inline(3)}}
  • 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

{{template.CSSRefExampleLink("display")}}

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"
  • Block-level elements create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings. 'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'
  • In-line elements do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. 'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4
Netscape 4
Opera 3.5

The table-* values are supported in Firefox and ???.

The compact and run-in values are not supported in Firefox. They are supported in ???.

The inline-block and inline-table values are supported starting in Firefox 3 / Gecko 1.9. inline-block is also supported in ??? and inline-table is also supported in ???.

See also

{{template.Cssxref("visibility")}}, {{template.Cssxref("float")}}, {{template.Cssxref("position")}}



{{ wiki.languages( { "en": "en/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}

Fuente de la revisión

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Sumario"> Sumario </h3>
<p>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'.
</p><p>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.
</p><p><br>
</p>
<ul><li> {{template.Xref_cssinitial()}}: {{template.Cssxref("inline")}}
</li><li> Aplicable a: todos los elementos
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Porcentajes: N/A
</li><li> Medio: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}:  como se ha especificado, excepto para elementos raíz, elementos <a href="es/CSS/float">floated</a>, y elementos <a href="es/CSS/position">absolutely positioned</a> (ver???)
</li></ul>
<h3 name="Sintaxis"> Sintaxis </h3>
<p><code>display:</code>  &lt;display-value&gt; | {{template.Cssxref("inherit")}}
</p>
<h3 name="Valores"> Valores </h3>
<dl><dt> &lt;display-value&gt; </dt><dd> El valor de Display puede ser uno cualquiera de los siguientes:
</dd></dl>
<ul><li> <b>inherit</b> : Especifica el valor de este elemento igual que el de su elemento padre.
</li></ul>
<ul><li> <b>none</b> : 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'.
</li></ul>
<ul><li> <b>inline</b> : Hace que el elemento genere uno o más elementos en la misma línea.
</li></ul>
<ul><li> <b>block</b> : Hace que el elemento genere una caja de bloque.
</li></ul>
<ul><li> <b>inline-block</b> : 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.  {{template.Fx_minversion_inline(3)}}
</li></ul>
<ul><li> <b>list-item</b> : 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.
</li></ul>
<ul><li> <b>compact</b> : 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.
</li></ul>
<ul><li> <b>run-in</b> : 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.
</li></ul>
<ul><li> <b>table-header-group|table-footer-group</b> : Este valor hace que el elemento se comporte de forma similar a las correspondientes instrucciones de tabla HTML: THEAD y TFOOT.
</li></ul>
<ul><li> <b>table</b> : 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.
</li></ul>
<ul><li> <b>inline-table</b> : 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. {{template.Fx_minversion_inline(3)}}
</li></ul>
<ul><li> <b>table-caption</b> : 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.
</li></ul>
<ul><li> <b>table-cell</b> : 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.
</li></ul>
<ul><li> <b>table-row|table-row-group</b> : 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.
</li></ul>
<ul><li> <b>table-column|table-column-group</b> : 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.
</li></ul>
<h3 name="Ejemplos"> Ejemplos </h3>
<p>{{template.CSSRefExampleLink("display")}}
</p>
<pre>Ext/Doc: p  { display: block }
In-Line:  &lt;p STYLE="display: block"&gt;text&lt;/p&gt;
</pre>
<h3 name="Notas"> Notas </h3>
<ul><li> 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.
</li><li>  el valor por defecto para esta propiedad era "block." En CSS2 este valor cambió a "inline". 
</li></ul>
<h5 name="Elementos_.22Block.22_contra_.22In-line.22"> Elementos "Block" contra "In-line" </h5>
<ul><li> <b>Block-level elements</b> create vertically distinct blocks of content (in the visual context) - generally using a line-break before and after the content. Only this value for the 'display' is allowed to generate a positioned element. Block behavior is exhibited by such HTML elements as BLOCKQUOTEs, DIVs and Headings. 'Display' property values creating a block element type: 'block', 'list-item', 'table, 'compact' and 'run-in'
</li></ul>
<ul><li> <b>In-line elements</b> do not create distinct blocks of content; element content is rendered using a line box (content is distributed line by line within a containing physical or virtual block element.) In-line behavior is exhibited by such HTML elements as physical and virtual character formatting, non-floated images and unmarked content. 'Display' property values creating an in-line element type: 'inline', 'inline-table', 'compact' and 'run-in'.
</li></ul>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#display">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<p>The <code>table-</code>* values are supported in Firefox and ???.
</p><p>The <code>compact</code> and <code>run-in</code> values are not supported in Firefox.  They are supported in ???.
</p><p>The <code>inline-block</code> and <code>inline-table</code> values are supported starting in Firefox 3 / Gecko 1.9.  <code>inline-block</code> is also supported in ??? and <code>inline-table</code> is also supported in ???.
</p>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("visibility")}}, {{template.Cssxref("float")}}, {{template.Cssxref("position")}}
</p><p><br>
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/CSS/display", "fr": "fr/CSS/display", "pl": "pl/CSS/display", "pt": "pt/CSS/display", "zh-cn": "cn/CSS/display" } ) }}
Revertir a esta revisión