width

La propiedad CSS width especifica la anchura del area de contenido de un elemento. De forma predeterminada, 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 (en-US) sobreescriben el width.

Sintaxis

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

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

/* Valores 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 width como porcentaje de la anchura del bloque contenedor.

auto

El navegador calculará y seleccionará la anchura para el elemento especificado.

max-content

La anchura preferida intrínseca.

min-content

La anchura mínima intrínseca.

fit-content(<length-percentage> (en-US))

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 se trunquen y/o no oscurezcan otro contenido 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,∞]> (en-US) |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> (en-US) )

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

Ejemplos

Anchura predeterminada

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

Ejemplo usando 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">Ancho medido en px</div>
<div class="em_length">Ancho medido en em</div>

Ejemplo usando Porcentaje

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

Ejemplo usando "max-content"

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;
}
<p class="maxgreen">La comunidad de Mozilla produce una gran cantidad de software excelente.</p>

Ejemplo usando "min-content"

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

Especificaciones

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

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también