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 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-element> || <anchor-size> ]? , <length-percentage>? )  

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

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

<anchor-element> = 
  <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>

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