width

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.

/* 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;

<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

auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)
where 
<length-percentage> = <length> | (en-US) <percentage>

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

.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>

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">Width in percentage</div>

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>

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>

[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.

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