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 |
Animation type | a length, percentage or calc(); |
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 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 |
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.