path: root/files/es/web/css/display/index.html

---
title: display
slug: Web/CSS/display
tags:
  - CSS
  - CSS Display
  - Propiedades CSS
translation_of: Web/CSS/display
---
<div>{{CSSRef}}</div>

<p>La propiedad CSS <strong><code>display</code></strong> especifica si un elemento es tratado como <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout" rel="nofollow">block or inline element</a> y el diseño usado por sus hijos, como <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>(Diseño de Flujo), <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">grid</a>(Cuadricula) o <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">flex</a>(Flexible). </p>

<p>Formalmente la propiedad <code>display</code> establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de <code>display</code> estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando <code>display: flex</code> es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. <strong>Vea</strong> la siguientes tablas para mas especificaciones individuales.</p>

<p>Además de los Diferentes Tipos de caja de Visualizacion, el valor de <code>none</code> permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza <code>none</code>, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.</p>

<pre class="brush:css no-line-numbers notranslate">/ * Valores &lt;display-outside&gt; * /

display: block:;
display: inline;
display: run-in;

/ * Valores &lt;display-inside&gt; * /
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/ * Valores &lt;display-outside&gt; más valores &lt;display-inside&gt; * /
display: block flow;
display: inline table;
display: flex run-in;

/ * Valores &lt;display-listitem&gt; * /
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/ * Valores &lt;display-internal&gt; * /
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/ * Valores &lt;display-box&gt; * /
display: contents;
display: none;

/ * Valores &lt;display-legacy&gt; * /
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/ * Valores globales * /
display: heredar;
display: initial;
display: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<p>La propiedad <code>display</code> se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:</p>

<ul>
 <li><a href="#display-outside">&lt;display-outside&gt;</a></li>
 <li><a href="#display-inside">&lt;display-inside&gt;</a></li>
 <li><a href="#display-listitem">&lt;display-listitem&gt;</a></li>
 <li><a href="#display-internal">&lt;display-internal&gt;</a></li>
 <li><a href="#display-box">&lt;display-box&gt;</a></li>
 <li><a href="#display-legacy">&lt;display-legacy&gt;</a></li>
</ul>

<p>En la actualidad, es mejor especificar <code>display</code> utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.</p>

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

<dl>
 <dt><a id="display-outside" name="display-outside">&lt;display-outside&gt;</a></dt>
 <dd>Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen:
 <table class="standard-table">
  <thead>
   <tr>
    <td class="header">Valor</td>
    <td class="header">Descripción</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>block</code></td>
    <td>El elemento genera un cuadro de elemento de bloque.</td>
   </tr>
   <tr>
    <td><code>inline</code></td>
    <td>El elemento genera uno o más cuadros de elemento en línea.</td>
   </tr>
   <tr>
    <td><code>run-in</code> {{experimental_inline}}</td>
    <td>El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><a id="display-inside" name="display-inside">&lt;display-inside&gt;</a></dt>
 <dd>Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue:
 <table class="standard-table">
  <thead>
   <tr>
    <td class="header">Valor</td>
    <td class="header">Descripción</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>flow</code> {{experimental_inline}}</td>
    <td>El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).
     <p>Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.</p>

     <p>Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> para su contenido o integra su contenido en su contexto de formato padre.</p>
    </td>
   </tr>
   <tr>
    <td><code>flow-root</code> {{experimental_inline}}</td>
    <td>El elemento genera un cuadro de elemento de bloque que establece un nuevo <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> .</td>
   </tr>
   <tr>
    <td><code>table</code></td>
    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.</td>
   </tr>
   <tr>
    <td><code>flex</code></td>
    <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">modelo de flexbox</a> .</td>
   </tr>
   <tr>
    <td><code>grid</code></td>
    <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.</td>
   </tr>
   <tr>
    <td><code>subgrid</code> {{experimental_inline}}</td>
    <td>Si el elemento padre tiene <code>display:grid</code>, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.</td>
   </tr>
   <tr>
    <td><code>ruby</code> {{experimental_inline}}</td>
    <td>El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><a id="display-listitem" name="display-listitem">&lt;display-listitem&gt;</a></dt>
 <dd>
 <p>El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.</p>

 <p>Si no se especifica ningún valor <code>&lt;display-inside&gt;</code>, el tipo de pantalla interna de la caja principal es el predeterminado <code>flow</code>. Si no se especifica ningún valor <code>&lt;display-outside&gt;</code>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado <code>block</code>.</p>
 </dd>
 <dt><a id="display-internal" name="display-internal">&lt;display-internal&gt;</a></dt>
 <dd>
 <p>Algunos modelos de disposición, como <span class="css">table y ruby</span>, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.</p>

 <p>A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.</p>

 <table class="standard-table">
  <thead>
   <tr>
    <td class="header">Valor</td>
    <td class="header">Descripción</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>table-row-group</code></td>
    <td>Estos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML</td>
   </tr>
   <tr>
    <td><code>table-header-group</code></td>
    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.</td>
   </tr>
   <tr>
    <td><code>table-footer-group</code></td>
    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.</td>
   </tr>
   <tr>
    <td><code>table-row</code></td>
    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.</td>
   </tr>
   <tr>
    <td><code>table-cell</code></td>
    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.</td>
   </tr>
   <tr>
    <td><code>table-column-group</code></td>
    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.</td>
   </tr>
   <tr>
    <td><code>table-column</code></td>
    <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.</td>
   </tr>
   <tr>
    <td><code>table-caption</code></td>
    <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.</td>
   </tr>
   <tr>
    <td><code>ruby-base</code> {{experimental_inline}}</td>
    <td>Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.</td>
   </tr>
   <tr>
    <td><code>ruby-text</code> {{experimental_inline}}</td>
    <td>Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.</td>
   </tr>
   <tr>
    <td><code>ruby-base-container</code> {{experimental_inline}}</td>
    <td>Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.</td>
   </tr>
   <tr>
    <td><code>ruby-text-container</code> {{experimental_inline}}</td>
    <td>Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><a id="display-box" name="display-box">&lt;display-box&gt;</a></dt>
 <dd>Estos valores se definen si un elemento genera cuadros de visualización en absoluto.
 <table class="standard-table">
  <thead>
   <tr>
    <td class="header">Valor</td>
    <td class="header">Descripción</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>contents</code> {{experimental_inline}}</td>
    <td>Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.</td>
   </tr>
   <tr>
    <td><code>none</code></td>
    <td>
     <p>Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.</p>

     <p>Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.</p>
    </td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt><a id="display-legacy" name="display-legacy">&lt;display-legacy&gt;</a></dt>
 <dd>CSS 2 usó una sintaxis de palabra clave única para la propiedad <code>display</code>, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue:
 <table class="standard-table">
  <thead>
   <tr>
    <td class="header">Valor</td>
    <td class="header">Descripción</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>inline-block</code></td>
    <td>
     <p>El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)</p>

     <p>Es equivalente a <code>inline flow-root</code>.</p>
    </td>
   </tr>
   <tr>
    <td><code>inline-table</code></td>
    <td>
     <p>El  valor <code>inline-table</code> no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.</p>

     <p>Es equivalente a  <code>inline table</code>.</p>
    </td>
   </tr>
   <tr>
    <td><code>inline-flex</code></td>
    <td>
     <p>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.</p>

     <p>Es equivalente a  <code>inline flex</code>.</p>
    </td>
   </tr>
   <tr>
    <td><code>inline-grid</code></td>
    <td>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>

<h3 id="display_none"><code>display: none;</code></h3>

<p>Al utilizar un valor de <code>none </code>en la propiedad <code>display </code>el elemento se elimina del <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árbol de accesibilidad</a>. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.</p>

<p>Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">un método alternativo con una combinación de propiedades de CSS</a>.</p>

<h3 id="display_contents"><code>display: contents;</code></h3>

<p>Los navegadores eliminarán el atributo predeterminado de <code>role</code> de cualquier elemento con una propiedad <code>display</code> que tenga un valor de <code>contents</code> del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.</p>

<p>Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos</p>

<ul>
 <li><a class="external external-icon" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
 <li><a class="external external-icon" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
</ul>

<h3 id="Tablas">Tablas</h3>

<p>Al trabajar con una tabla, si la propiedad <code>display</code> cambia al valor de <code>block</code>, <code>grid</code> o <code>flex</code> se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.</p>

<p>Para más información por favor referirse a los siguientes artículos:</p>

<ul>
 <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
 <li><a class="external external-icon" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
 <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Hide_element" name="Hide_element">Ocultar Elementos</h3>

<h4 id="Contenido_HTML">Contenido HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt; Texto visible &lt;/ p&gt;</pre>

<h4 id="Contenido_CSS">Contenido CSS</h4>

<pre class="brush: css notranslate">  display: none;</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample ("Hide_element", 300, 60)}}</p>

<p><a href="/samples/cssref/display.html">Ver El Ejemplo Vivo</a></p>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}</td>
   <td>{{Spec2 ('Pantalla CSS3')}}</td>
   <td>Agregado <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, y los valores de varias palabras clave.</td>
  </tr>
  <tr>
   <td>{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}</td>
   <td>{{Spec2 ('CSS3 Ruby')}}</td>
   <td>Agregado <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, y <code>ruby-text-container</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}</td>
   <td>{{Spec2 ('Cuadrícula CSS3')}}</td>
   <td>Se agregaron los valores del modelo de cuadrícula.</td>
  </tr>
  <tr>
   <td>{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}</td>
   <td>{{Spec2 ('CSS3 Flexbox')}}</td>
   <td>Se agregaron los valores del modelo de caja flexible.</td>
  </tr>
  <tr>
   <td>{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}</td>
   <td>{{Spec2 ('CSS2.1')}}</td>
   <td>Se agregaron los valores del modelo de tabla e <code>inline-block<em>.</em></code></td>
  </tr>
  <tr>
   <td>{{SpecName ('CSS1', '#display', 'display')}}</td>
   <td>{{Spec2 ('CSS1')}}</td>
   <td>Definición inicial. Valores básicos: <code>none</code>, <code>block</code>, <code>inline</code>, y <code>list-item</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

{{Compat("css.properties.display")}}

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}</li>
 <li>{{cssxref("flex")}}</li>
</ul>