display

Artículo
10/11/2017

Establece si se representará el objeto.

Sintaxis

{ display: sDisplay }

Valores posibles

sDisplay

Cadena que especifica o recibe uno de los valores siguientes:

block	El objeto se representa como un elemento de bloque.
box	El objeto se representa como un elemento de cuadro flexible de nivel de bloque.
inline	Valor predeterminado. El objeto se representa como un elemento en línea cuyo tamaño depende de las dimensiones del contenido.
inline-block	El objeto se representa en línea, pero su contenido se representa como un elemento de bloque. Los elementos en línea adyacentes se representan en la misma línea si el espacio lo permite.
inline-box	Objeto tal y como se representa como elemento de cuadro flexible incorporado.
list-item	El objeto se representa como un elemento de bloque y se agrega un marcador list-item.
none	El objeto no se representa.
table	El objeto se representa como una tabla.
table-caption	El objeto se representa como caption .
table-cell	El objeto se representa como td o th , dependiendo de la ubicación del objeto en la tabla.
table-column	El objeto se representa como col .
table-column-group	El objeto se representa como colgroup .
table-footer-group	El pie de tabla siempre se muestra a continuación de todas las demás filas y grupos de filas, y antes de cualquier título que aparezca en la parte inferior. El pie de página se muestra en cada una de las páginas abarcadas por una tabla.
table-header-group	El encabezado de tabla siempre se muestra precediendo a todas las demás filas y grupos de filas, y a continuación de cualquier título que aparezca en la parte superior. El encabezado se muestra en cada una de las páginas abarcadas por una tabla.
table-row	El objeto se representa como tr .
table-row-group	El objeto se representa como tbody .

Esta propiedad tiene un valor predeterminado de inline para todos los objetos con las siguientes excepciones:

address	block	blockquote	block	body	block
center	block	col	block	colgroup	block
dd	block	dir	block	div	block
dl	block	dt	block	fieldset	block
form	block	frame	none	hn	block
hr	block	iframe	block	legend	block
li	list-item	listing	block	menu	block
ol	block	p	block	plaintext	block
pre	block	table	block	tbody	none
td	block	tfoot	none	th	block
thead	none	tr	block	ul	block
xml	block

Esta propiedad no se hereda.

Observaciones

Todos los objetos HTML visibles son del tipo block o inline. Por ejemplo, un objeto DIV es un elemento de bloque y un objeto SPAN es un elemento en línea. Los elementos de bloque normalmente empiezan una nueva línea y pueden contener otros elementos de bloque y en línea. Los elementos en línea normalmente no empiezan una nueva línea y pueden contener otros datos o elementos en línea. La modificación de los valores de la propiedad display afecta al diseño del contenido adyacente porque:

Se agrega una línea a continuación del elemento que tiene el valor block .
Se quita una línea del elemento que tiene el valor inline .
Se ocultan los datos para el elemento que tiene el valor none .

A diferencia de la propiedad visibility , display=none no reserva espacio para el objeto en la pantalla.

Los valores table-header-group y table-footer-group se pueden usar para especificar que el contenido de thead y los objetos de tfoot se muestran en todas las páginas para una tabla que abarca varias páginas.

Ejemplos

Este ejemplo muestra el efecto de cambiar los valores de la propiedad display entre inline , block y none :

<span id=ospan>This is a span</span> in a sentence.
<p>
<input type=button value ="Block" onclick="ospan.style.display='block'">
:

El ejemplo usa llamadas a función para ocultar y mostrar filas y celdas de las tablas:

<script>
function getPets()
{
    oRow1Cell2.style.display="none";
    oRow2Cell2.style.display="block";
    oRow3Cell2.style.display="none";
}
</script>
:
<table>
<tr id="oRow1"><td>Horses</td>
<td id="oRow1Cell2">Thoroughbreds</td>
<td>Fast</td></tr>
<tr id="oRow2"><td>Dogs</td>
<td id="oRow2Cell2">Greyhounds</td>
<td>Fast</td></tr>
<tr id="oRow3"><td>Marsupials</td>
<td id="oRow3Cell2">Opossums</td>
<td>Slow</td></tr>
</table>
:
<input type=button onclick="getPets()" value ="Show household pets">

Información sobre estándares

Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 1 (CSS1) (Hojas de estilos en cascada (CSS), nivel 1 (CSS1)) Ee371238.xtlink_newWindow(es-es,Expression.40).png .

Aplicable a

a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frame, hn, hr, html, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

Share via

display

Sintaxis

Valores posibles

Observaciones

Ejemplos

Información sobre estándares

Aplicable a

Vea también

Conceptos

Otros recursos

Recursos adicionales