---
title: visibility
slug: Web/CSS/visibility
tags:
  - CSS
  - 'CSS:Referencias'
  - Referencia_CSS
  - Todas_las_Categorías
translation_of: Web/CSS/visibility
---
<p> </p>

<p>{{ CSSRef() }}</p>

<h3 id="Resumen" name="Resumen">Resumen</h3>

<p>La propiedad <code>visibility</code> se usa para dos efectos:</p>

<ol>
 <li>El valor <code>hidden</code> esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.</li>
 <li>El valor <code>collapse</code> esconde filas o columnas de una tabla.</li>
</ol>

<ul>
 <li>{{ Cssxref("initial", "Valor incial") }}: {{ Cssxref("visible") }}</li>
 <li>Se aplica a: Todos los elementos.</li>
 <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
 <li>Porcentajes: N/A</li>
 <li>Medio: {{ Xref_cssvisual() }}</li>
 <li>{{ Cssxref("computed value", "Valor calculado") }}: Como se especifica.</li>
</ul>

<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>

<pre class="eval">visibility: visible | hidden | collapse | {{ Cssxref("inherit") }}
</pre>

<h3 id="Valores" name="Valores">Valores</h3>

<dl>
 <dt><code>visible</code></dt>
 <dd>El elemento se muestra normalmente.</dd>
 <dt><code>hidden</code></dt>
 <dd>El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad <code>visibility: visible</code>, descendientes de ése elemento serán visibles.</dd>
 <dt><code>collapse</code></dt>
 <dd>Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código <code>{{ Cssxref("display") }}: none</code> a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos, <code>collapse</code> funciona como <code>hidden</code>).</dd>
</dl>

<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>

<pre class="eval">p        { visibility: hidden; }   /* Los párrafos no serán visibles                       */
p.showme { visibility: visible; }  /* excepto los que tengan class = showme (clase= muéstrame)                */
tr.col   { visibility: collapse; } /* las filas de la tabla con la clase<em>col</em> se fusionarán*/
</pre>

<h3 id="Notas" name="Notas">Notas</h3>

<p>El soporte para <code>visibility: collapse</code> no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como <code>visibility: hidden</code> en elementos que no son filas / columnas de una tabla.</p>

<p><code>visibility:collapse</code> puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente <code>visibility: visible</code> en la tabla anidada.</p>

<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a></li>
</ul>

<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>

<p>{{ Cssxref("display") }}</p>

<p> </p>

<div class="noinclude">
<p><span class="comment">Categorías</span></p>

<p><span class="comment">Interwiki Languages</span></p>
</div>

<p>{{ languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu", "en": "en/CSS/visibility" } ) }}</p>