width

Resumen

La propiedad CSS width especifica la anchura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

Las propiedades min-width y max-width sobreescriben el valor de width.

Valor inicialauto
Applies toall elements but non-replaced inline elements, table rows, and row groups
Heredableno
Percentagesrefer to the width of the containing block
Mediavisual
Valor calculadoa percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe length or percentage before the keyword, if both are present

Sintaxis

/* Valores <length> */
width: 300px;
width: 25em;

/* Valores <percentage> */
width: 75%;

/* Valores clave */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Valores globales */
width: inherit;
width: initial;
width: unset;

Valores

<length>
Ver <length> para unidades disponibles.
<percentage>
Especificado con el tipo <percentage> como porcentaje de la anchura del bloque contenedor. Si la anchura del bloque contenedor depende de la anchura del elemento, la presentación resultante es indefinida.
border-box
Si está presente, el valor <length> o <percentage> precedente es aplicado a los límites del borde del elemento.
content-box
Si está presente, el valor <length> o <percentage> precedente será aplicado a los límites de contenido del elemento.
auto
El navegador calculará y seleccionará la anchura para el elemento especificado.
fill
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content
La anchura preferida intrínseca.
min-content
La anchura mínima intrínseca.
available
La anchura del bloque contenedor menos su margen horizontal, borde y padding.
fit-content
El mayor entre:
  • la anchura mínima intrínseca
  • la menor entre la anchura prefereida intrínseca y la anchura disponible

Sintaxis formal

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Ejemplos

Anchura predeterminada

p.goldie {
  background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>

Píxeles y ems

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

Porcentaje

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

Especificaciones

Especificación Estado Comentarios
CSS Basic Box Model
La definición de 'width' en esta especificación.		 Working Draft Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
CSS Transitions
La definición de 'width' en esta especificación.		 Working Draft Incluye width como propiedad que puede ser animada.
CSS Level 2 (Revision 1)
La definición de 'width' en esta especificación.		 Recommendation Especifica a qué elementos es aplicable.
CSS Level 1
La definición de 'width' en esta especificación.		 Recommendation Definición inicial
CSS Intrinsic & Extrinsic Sizing Module Level 3
La definición de 'width' en esta especificación.		 Working Draft Añade nuevas palabras clave de tamaño para width y height

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico (Yes) 1.0 (1.7 o anterior) 4 3.5 1.0 (85)
Capacidad de ser animada ? 16.0 (16.0) ? ? ?
max-content 22.0 -webkit
46.0 [1]		 3.0 (1.9)-moz ? 15 -webkit 2.0 (421) (intrinsic value)
6.1 -webkit
min-content

22.0 [4] -webkit
46.0 [1]

 3.0 (1.9) -moz ? 15 -webkit 2.0 (421) (min-intrinsic value)
6.1 -webkit
available Sin soporte 3.0 (1.9) -moz ? ? ?[1]
fill-available 22.0 -webkit Sin soporte ? ? 6.1 -webkit
fit-content 22.0 [4] -webkit
46.0 [1]		 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit[2]
border-box y content-box Sin soporte Sin soporte Sin soporte Sin soporte Sin soporte
fill 46.0        
Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico ? (Yes) ? ? ? ? (Yes)
Capacidad de ser animada ? ? 16.0 (16.0) ? ? ? ?
max-content Sin soporte 46.0 [1] ? ? ? ? 46.0 [1]
min-content Sin soporte 46.0 [1] ? ? ? ? 46.0 [1]
available ? ? ? ? ? ? ?
fill-available Sin soporte 46.0 [1] ? ? ? ? 46.0 [1]
fit-content Sin soporte 46.0 [1] ? ? ? ? 46.0 [1]
border-box y content-box ? ? ? ? ? ? ?
fill Sin soporte 46.0         46.0

[1] WebKit implementa una variante a este valor con el nombre fill-available a partir de 2013.

[2] Las versiones anteriores de WebKit implementaban una versión anterior de este valor con nombre intrinsic, pero implementan además fit-content desde la versión 6.1.

[3] Sin prefijo.

[4] Soporte a las antiguas palabras clave intrinsic y min-intrinsic de Webkit, pero removido en Chrome 48.

Véase también

Temas relacionados