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

---
title: <length>
slug: Web/CSS/length
tags:
  - Referencia
  - Tipo de Dato CSS
translation_of: Web/CSS/length
---
<div>{{CSSRef}}</div>

<h2 id="Sumario" name="Sumario">Resumen</h2>

<p>El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code>&lt;length&gt;</code> denota medidas de distancia. Es un valor {{cssxref("&lt;number&gt;")}} seguido por una unidad de longitud (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("&lt;number&gt;")}} <code>0</code>.</p>

<p>Muchas propiedades CSS (<a href="es/CSS_Reference">CSS properties</a>) reciben valores <code>&lt;length&gt;</code>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.</p>

<p>Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("&lt;percentage&gt;")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <code>&lt;length&gt;</code>, no son valores <code>&lt;length&gt;</code> en sí.</p>

<h2 id="Interpolación">Interpolación</h2>

<p>Los valores de tipo <code>&lt;length&gt;</code> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("&lt;timing-function&gt;")}} asociada a la animación.</p>

<h2 id="Unidades" name="Unidades">Unidades</h2>

<h3 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h3>

<h4 id="Longitudes_relativas_a_la_fuente">Longitudes relativas a la fuente</h4>

<dl>
 <dt><code>em</code></dt>
 <dd>Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente <em>heredado</em> por el elemento.
 <div class="note">Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ritmo vertical de la página</a>, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en <strong>em</strong>.</div>
 </dd>
 <dt><code>ex</code></dt>
 <dd>Esta unidad representa la <a href="https://es.wikipedia.org/wiki/Altura_de_la_x">altura de la x</a> de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; <code>1ex ≈ 0.5em </code>en muchas fuentes.</dd>
 <dt id="ch"><code>ch</code></dt>
 <dd>Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento.</dd>
 <dt id="rem"><code>rem</code></dt>
 <dd>Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial.
 <div class="note">Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades <strong>em</strong>, aunque estas son ligeramente más complejas.</div>
 </dd>
</dl>

<h4 id="Longitudes_de_porcentaje_del_viewport">Longitudes de porcentaje del viewport</h4>

<p>Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).</p>

<p>En conjunto con <code>overflow:auto</code>, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de <code>overflow:scroll</code>, sí lo es.</p>

<p>En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.</p>

<dl>
 <dt><code>vh</code></dt>
 <dd>1/100 de la altura del viewport.</dd>
 <dt><code>vw</code></dt>
 <dd>1/100 de la anchura del viewport.</dd>
 <dt><code>vmin</code></dt>
 <dd>1/100 del valor mínimo entre la altura y anchura del viewport.</dd>
 <dt><code>vmax</code></dt>
 <dd>1/100 del valor máximo entre la altura y anchura del viewport.</dd>
</dl>

<h3 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h3>

<dl>
</dl>

<p>Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.</p>

<p>Para dispositivos de ppp bajo, la unidad <strong>px</strong> representa el <em>píxel de referencia</em> físico, y el resto son definidos con relación a éste. Así, <code>1in</code> es definido como <code>96px</code>, que equivalen a <code>72pt</code>. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.</p>

<p>Para dispositivos de alto ppp, las pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) son definidos como su contraparte física. De esta forma, la unidad <strong>px</strong> es definida con relación a ellas (1/96 de 1 pulgada).</p>

<div class="note">
<p>Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como <code>em</code> o <code>rem</code>.</p>
</div>

<dl>
 <dt id="px"><code>px</code></dt>
 <dd>Relativa al dispositivo de visualización.<br>
 Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.<br>
 Para <em>impresoras</em> y <em>pantallas de muy alta resolución</em>, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.</dd>
 <dt id="mm"><code>mm</code></dt>
 <dd>Un milímetro.</dd>
 <dt id="q"><code>q</code></dt>
 <dd>Un cuarto de milímetro (1/40° de centímetro).</dd>
 <dt id="cm"><code>cm</code></dt>
 <dd>Un centímetro (10 milímetros).</dd>
 <dt id="in"><code>in</code></dt>
 <dd>Una pulgada (2.54 centímetros).</dd>
 <dt id="pt"><code>pt</code></dt>
 <dd>Un punto (1/72° de pulgada).</dd>
 <dt id="pc"><code>pc</code></dt>
 <dd>Una pica (12 puntos).</dd>
 <dt id="mozmm"><code>mozmm</code> {{non-standard_inline}}</dt>
 <dd>Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.</dd>
</dl>

<h2 id="Unidades_CSS_y_puntos_por_pulgada_(dots-per-inch)">Unidades CSS y puntos por pulgada (dots-per-inch)</h2>

<p class="note">La unidad <code>in</code> no representa una pulgada física en pantalla, sino <code>96px</code>. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán <code>96ppp</code>. En dispositivos con mayor densidad de píxeles, <code>1in</code> será menor que una pulgada física. De forma similar, <code>mm</code>, <code>cm</code>, y <code>pt</code> no son longitudes absolutas.</p>

<p>Algunos ejemplos específicos:</p>

<ul>
 <li><code>1in</code> siempre son <code>96px,</code></li>
 <li><code>3pt</code> siempre son <code>4px</code>,</li>
 <li><code>25.4mm</code> siempre son <code>96px.</code></li>
</ul>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>Añadidos <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> y <code>q</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td><code>pt</code>, <code>pc</code>, <code>px</code> son definidos explícitamente (fueron definidos implícitamente en CSS1)</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<p>{{CompatibilityTable}} </p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1</td>
   <td>{{ CompatGeckoDesktop("1.0")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>
    <p>27</p>
   </td>
   <td>{{ CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
   <td>9.0</td>
   <td>20.0</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td>ex</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>4 (532.3)</td>
   <td>{{ CompatGeckoDesktop("1.9.2")}}</td>
   <td>9.0</td>
   <td>11.6</td>
   <td>4.1</td>
  </tr>
  <tr>
   <td><code>vh, vw</code></td>
   <td>20</td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>9.0</td>
   <td>20.0</td>
   <td>6.0</td>
  </tr>
  <tr>
   <td><code>vmin</code></td>
   <td>
    <p>20</p>
   </td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>9.0<sup>[2]</sup></td>
   <td>20.0</td>
   <td>6.0</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>26</td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>{{CompatNo}}</td>
   <td>20.0</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("21")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>mozmm</code> {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>1in</code> siempre es <code>96ppp</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>q</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("49.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>ch</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>7.8</td>
   <td>{{CompatUnknown}}</td>
   <td>7.1.1</td>
  </tr>
  <tr>
   <td>ex</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>rem</code></td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>12.0</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td><code>vh, vw, vmin</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("19")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>6.0</td>
  </tr>
  <tr>
   <td><code>vmax</code></td>
   <td>1.5</td>
   <td>{{CompatGeckoMobile("19")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("21.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>q</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("49.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0)<code> ch</code> era la anchura de 'M', y no funcionaba para las propiedades CSS {{CSSxref("border-width")}} y {{CSSxref("outline-width")}}.</p>

<p>[2] Internet Explorer implementa esto con el nombre no estándar <code>vm</code>.</p>