width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propiedad CSS width establece el ancho de un elemento. Por defecto, establece el ancho del área de contenido, pero si el box-sizing se establece en border-box, establece el ancho del área del borde.

Pruébalo

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

Sintaxis

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

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

/* Valores en palabras clave */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Valores globales */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

Valores

<length>

Define el ancho como un valor absoluto.

<percentage>

Especifica el ancho como porcentaje de la anchura del bloque contenedor.

auto

El navegador calculará y seleccionará el ancho para el elemento especificado.

max-content

El ancho preferido intrínseco.

min-content

EL ancho mínimo intrínseco.

fit-content(<length-percentage>)

Utiliza la fórmula de fit-content con el espacio disponible reemplazado por el argumento especificado, ejemplo, min(max-content, max(min-content, <longitud-porcentaje>)).

Problemas de accesibilidad

Asegúrese de que los elementos establecidos con un width no trunquen y/o oculten otros contenidos cuando se amplía la página para aumentar el tamaño del texto.

Definición formal

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

Sintaxis formal

width = 
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Ejemplos

Anchura predeterminada

css
p.goldie {
  background: gold;
}
html
<p class="goldie">
  La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>

Ejemplo usando píxeles y ems

css
.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;
}
html
<div class="px_length">Ancho medido en px</div>
<div class="em_length">Ancho medido en em</div>

must be provided

Ejemplo usando porcentaje

css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
html
<div class="percent">Ancho en porcentaje</div>

must be provided

Ejemplo usando "max-content"

css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /* Safari/WebKit usa un nombre no estándar */
  width: -moz-max-content; /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  width: max-content;
}
html
<p class="maxgreen">
  La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>

must be provided

Ejemplo usando "min-content"

css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /* Firefox */
  width: -webkit-min-content; /* Chrome */
  width: min-content;
}
html
<p class="minblue">
  La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>

must be provided

Especificaciones

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
width
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
Is animatable
max-content
min-content
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también