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.

* MDN Entendiendo WCAG, Pauta 1.4
* Comprender el criterio de éxito 1.4.4 | W3C Entendiendo WCAG 2.0
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,∞]> )    
  
<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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* El modelo de caja
* `height`
* `box-sizing`
* `min-width`, `max-width` (en-US)
* Las propiedades lógicas asignadas: `block-size`, `inline-size`