width

La propiedad width controla el ancho de un elemento HTML. Parece directa, pero su comportamiento exacto depende de dos variables: el tipo de elemento (bloque vs. inline) y el valor de box-sizing (qué incluye ese ancho). Entender width correctamente es entender cuánto espacio horizontal ocupa realmente un elemento en pantalla.

Por defecto, un elemento en bloque (div, p, section, article…) no tiene width declarado — toma todo el ancho disponible de su contenedor. Declarar width: 400px lo restringe a 400px. Declarar width: 50% lo restringe a la mitad del ancho del contenedor padre. Declarar width: auto restaura el comportamiento por defecto (tomar todo el espacio disponible), que es distinto de max-content o fit-content.

Un elemento en línea puro (span, em, a dentro de texto) ignora width: su ancho es siempre el de su contenido y no puede modificarse con esta propiedad. Para que width tenga efecto en ese elemento hay que cambiar su display a block o inline-block.

La relación con box-sizing es fundamental: con content-box (el default del navegador), width mide solo el área de contenido, y el padding y border se suman por fuera agrandando el elemento. Con border-box (el reset moderno), width mide la caja completa incluyendo padding y border. El mismo valor de width produce tamaños finales distintos dependiendo de esta configuración.

Cómo funciona

width establece el ancho del área de contenido del elemento (con content-box) o el ancho de la caja completa hasta el border externo (con border-box). El margin nunca entra en este cálculo — siempre es espacio externo.

Si el contenido es más ancho que el width declarado, el comportamiento depende de overflow: por defecto el contenido desborda (overflow: visible); con overflow: hidden se recorta; con overflow: auto aparece una barra de scroll.

Sintaxis

.caja {
  width: 300px;           /* ancho fijo en píxeles */
  width: 50%;             /* porcentaje del contenedor padre */
  width: auto;            /* el elemento toma todo el ancho disponible (default en bloque) */
  width: max-content;     /* tan ancho como necesite su contenido, sin wrap */
  width: min-content;     /* el mínimo ancho que permite su contenido (wrapping máximo) */
  width: fit-content;     /* como max-content pero sin pasar el contenedor */
}

Valores

auto (valor por defecto en elementos bloque)

En un elemento en bloque, auto hace que el elemento tome todo el ancho disponible del contenedor, respetando sus propios margins. Es el comportamiento natural de los elementos en bloque: expandirse horizontalmente hasta donde pueden.

Importante: auto en width no es lo mismo que auto en max-width. Tampoco es lo mismo que width: 100%: con 100% el elemento ocupa exactamente el 100% del ancho del contenedor (y el padding/border se suman por encima con content-box); con auto el elemento toma lo disponible incluyendo en el cálculo su propio padding y border.

Longitudes fijas (px, em, rem, etc.)

Establecen un ancho fijo independiente del contenedor. Útil para componentes con tamaño definido (avatares, iconos, widgets de medidas exactas).

.avatar { width: 48px; height: 48px; }

Porcentajes (%)

Relativos al ancho del elemento contenedor. Útiles para layouts responsivos: width: 50% siempre ocupa la mitad del padre, independientemente del tamaño de la ventana.

.columna { width: 33.333%; }

Keywords de contenido (max-content, min-content, fit-content)

Relativamente nuevas, disponibles en todos los navegadores modernos:

• max-content — el elemento es tan ancho como necesita para mostrar todo su contenido sin hacer wrap. Útil para elementos que deben “abrazar” su contenido (labels, botones inline-block sin wrap).
• min-content — el elemento adopta el mínimo ancho que permite su contenido, haciendo wrap agresivo. La línea más larga que no puede romperse determina este mínimo.
• fit-content — como max-content pero nunca supera el ancho del contenedor. El elemento “encoge” si hay espacio y crece hasta su contenido si hay lugar.

min-width y max-width

Estas propiedades establecen límites al ancho del elemento. Son fundamentales para diseño responsivo y conviven con width como un sistema de restricciones:

• El ancho final siempre satisface: min-width ≤ ancho final ≤ max-width.
• Si width cae fuera de esos límites, los límites ganan.

min-width

Establece el ancho mínimo: el elemento nunca se encoge más allá de este valor, aunque el contenedor sea más chico.

.boton {
  min-width: 120px;   /* el botón siempre tiene al menos 120px aunque el texto sea corto */
  padding: 8px 16px;
}

El valor por defecto es 0 (sin límite mínimo). Un min-width: 0 explícito es útil en flexbox para evitar que un ítem se encoja más de lo esperado — los ítems flex tienen min-width: auto por defecto, lo que puede causar desbordamientos.

max-width

Establece el ancho máximo: el elemento no crece más allá de este valor, aunque el contenedor sea más grande.

/* Patrón clásico de contenedor centrado */
.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Imagen responsiva */
img {
  width: 100%;
  max-width: 100%;  /* nunca más ancha que su tamaño natural */
}

El valor por defecto es none (sin límite máximo). El patrón max-width + margin: 0 auto es el más usado en la web: el elemento se estira hasta el ancho del viewport en pantallas chicas y se centra con un ancho máximo en pantallas grandes.

Ejemplo realista

/* Layout de página: contenedor centrado con ancho máximo */
.pagina {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;  /* padding lateral para pantallas chicas */
}

/* Columnas de ancho igual con límites */
.columna {
  width: 50%;
  min-width: 280px; /* en pantallas muy chicas, no se encoge más */
}

/* Botón que se adapta a su contenido pero tiene un mínimo */
.boton {
  width: auto;
  min-width: 120px;
  padding: 10px 20px;
}

Cuándo usarlo

Notas, gotchas e interacción

• width no afecta a elementos inline puro. <span>, <a>, <em> ignoran width. Para que surta efecto, hay que cambiar el display a block o inline-block.
• width: 100% vs width: auto: con content-box, width: 100% puede causar desbordamiento si el elemento también tiene padding o border (el total sería 100% + padding + border). Con border-box no hay este problema. width: auto en cambio sí respeta el padding y border del elemento.
• Interacción con box-sizing: con content-box, width mide solo el contenido y el padding/border se suman por fuera. Con border-box, width incluye padding y border. Cicatriz del sandbox de este sitio: el sandbox inyecta *{box-sizing:border-box} (docs/CICATRICES.md A.1.7), por lo que en los ejercicios width siempre es el ancho total visible.
• min-width gana sobre width y max-width. Si min-width: 200px y max-width: 150px, el elemento mide 200px — min-width siempre prevalece sobre max-width cuando hay conflicto.
• min-width: 0 en flex items. Por defecto, los ítems flex tienen min-width: auto, lo que puede evitar que se encojan por debajo del tamaño mínimo de su contenido. Declarar min-width: 0 explícitamente permite que el ítem se encoja normalmente.

Vigente / legacy

No hay formas legacy para width. Las keywords max-content, min-content y fit-content son relativamente recientes (Baseline widely available). Las propiedades lógicas inline-size (equivalente a width en escritura horizontal) y block-size (equivalente a height) son alternativas modernas para layouts internacionales, pero width sigue siendo la forma estándar para la mayoría de los proyectos.