width

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

Sintaxis formal

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

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

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>

Ejemplo usando porcentaje

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

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>

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>

Especificaciones

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

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también