width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 inicial	`auto`
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Heredable	no
Percentages	refer to the width of the containing block
Valor calculado	a percentage or `auto` or the absolute length
Animation type	a 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-name> || <anchor-size> ]? , <length-percentage>? )  

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

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

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

El modelo de caja
height
box-sizing
min-width, max-width
Las propiedades lógicas asignadas: block-size, inline-size