Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
width
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
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
width: 150px;
width: 20em;
width: 75%;
width: auto;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the width.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
height: 80%;
justify-content: center;
color: #ffffff;
}
Las propiedades min-width y max-width sobreescriben el width.
Sintaxis
/* 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-contentcon 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()> |
stretch |
fit-content |
contain
<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> =
<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
p.goldie {
background: gold;
}
<p class="goldie">
La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>
Ejemplo usando 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">Ancho medido en px</div>
<div class="em_length">Ancho medido en em</div>
Ejemplo usando porcentaje
.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}
<div class="percent">Ancho en porcentaje</div>
Ejemplo usando "max-content"
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;
}
<p class="maxgreen">
La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>
Ejemplo usando "min-content"
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
width: min-content;
}
<p class="minblue">
La comunidad de Mozilla produce una gran cantidad de software excelente.
</p>
Especificaciones
| Specification |
|---|
| CSS Box Sizing Module Level 3 # propdef-width |
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.
Véase también
- El modelo de caja
heightbox-sizingmin-width,max-width- Las propiedades lógicas asignadas:
block-size,inline-size