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
Animatableyes, 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 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><percentage> precedente es aplicado a los límites del borde del elemento.
content-box
Si está presente, el valor <length><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

Compatibilidad de navegadores

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

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: israel-munoz, diegocanal, teoli, HenryGR, Mgjbot
 Última actualización por: israel-munoz,