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 inicial	`auto`
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Heredable	no
Percentages	refer to the width of the containing block
Media	visual
Valor calculado	a percentage or `auto` or the absolute length
Animatable	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the 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 The definition of 'width' in that specification.	Working Draft	Añade las palabras clave `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box`.
CSS Transitions The definition of 'width' in that specification.	Working Draft	Incluye `width` como propiedad que puede ser animada.
CSS Level 2 (Revision 1) The definition of 'width' in that specification.	Recommendation	Especifica a qué elementos es aplicable.
CSS Level 1 The definition of 'width' in that specification.	Recommendation	Definición inicial
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification.	Working Draft	Añade nuevas palabras clave de tamaño para `width` y `height`

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Soporte básico	(Yes)	1.0 (1.7 or earlier)	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`	No support	3.0 (1.9) -moz	?	?	?^[1]
`fill-available`	22.0 -webkit	No support	?	?	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`	No support	No support	No support	No support	No support
`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`	No support	46.0 [1]	?	?	?	?	46.0 [1]
`min-content`	No support	46.0 [1]	?	?	?	?	46.0 [1]
`available`	?	?	?	?	?	?	?
`fill-available`	No support	46.0 [1]	?	?	?	?	46.0 [1]
`fit-content`	No support	46.0 [1]	?	?	?	?	46.0 [1]
`border-box` y `content-box`	?	?	?	?	?	?	?
`fill`	No support	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

box model, height, box-sizing, min-width, max-width