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 (en-US) 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
Valor calculadoa percentage or auto or the absolute length
Animation typea length, percentage or calc();

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 Experimental
Si está presente, el valor <length><percentage> precedente es aplicado a los límites del borde del elemento.
content-box Experimental
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 Experimental
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content Experimental
La anchura preferida intrínseca.
min-content Experimental
La anchura mínima intrínseca.
available Experimental
La anchura del bloque contenedor menos su margen horizontal, borde y padding.
fit-content Experimental
El mayor entre:
  • la anchura mínima intrínseca
  • la menor entre la anchura prefereida intrínseca y la anchura disponible

Sintaxis formal

width = 
auto |
<length-percentage> |
min-content |
max-content |
fit-content( <length-percentage> )

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

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 Box Model
La definición de 'width' en esta especificación.
Candidate Recommendation 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 Box 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

BCD tables only load in the browser

Véase también