Propiedad CSS width
La propiedad CSS width establece el ancho del elemento. Prueba ejemplos con cada uno de los valores de esta propiedad.
La propiedad CSS width establece el ancho del área de contenido de un elemento — la caja interior que contiene el texto y los elementos hijo. Por defecto, este ancho no incluye el borde, el relleno ni el margen: estos se añaden por encima, por lo que el ancho total renderizado del elemento es width + padding + border.
Esta página explica qué mide width, todos los valores que acepta (incluidas las palabras clave intrínsecas modernas min-content, max-content y fit-content), cómo se resuelven los porcentajes y el problema del modelo de caja que confunde a la mayoría de los principiantes.
Cómo interactúa width con el modelo de caja
La forma en que se mide width depende de la propiedad box-sizing:
content-box(el valor predeterminado) —widthdimensiona solo el contenido. El relleno y el borde se añaden fuera. Una caja conwidth: 200px; padding: 20px; border: 5px solidse renderiza con 250px de ancho.border-box—widthdimensiona el contenido, el relleno y el borde juntos. Las mismas declaraciones se renderizan con exactamente 200px de ancho, y el área de contenido se reduce para hacer espacio.
Dado que border-box hace que los tamaños de los elementos sean predecibles, muchas hojas de estilo lo definen globalmente:
*,
*::before,
*::after {
box-sizing: border-box;
}A qué elementos se aplica width
La propiedad width se aplica a todos los elementos excepto a los elementos en línea no reemplazados (como un <span> simple), las filas de tabla y los grupos de filas (es decir, <thead>, <tfoot> y <tbody>). Para dar ancho a un elemento en línea, primero establece display: inline-block o display: block.
La propiedad acepta una longitud CSS (px, pt, em, etc.), un porcentaje o una palabra clave como auto o max-content.
Un porcentaje se resuelve en relación con el ancho del elemento padre (el bloque contenedor). Para los elementos con posicionamiento absoluto, el porcentaje se calcula en relación con el ancho del padding box del bloque contenedor.
La propiedad width puede ser sobrescrita por min-width y max-width: un max-width menor que width tiene prioridad, y un min-width mayor que width también tiene prioridad. La propiedad complementaria es height.
Los valores de longitud negativos no son válidos.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos excepto los elementos en línea no reemplazados, las filas de tabla y los grupos de filas. |
| Se hereda | No. |
| Animable | Sí. El ancho de un elemento es animable. |
| Versión | CSS1 |
| Sintaxis DOM | Object.style.width = "300px"; |
Sintaxis
Sintaxis de la propiedad CSS width
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Ejemplo de la propiedad width especificada en "%":
Ejemplo de la propiedad CSS width con valor %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Resultado
En el ejemplo anterior, el ancho del contenedor div es del 50% — la mitad del ancho de su elemento padre (aquí, el <body>).
En el siguiente ejemplo, el ancho del primer elemento es de 250px y el del segundo elemento es de 25em:
Ejemplo de la propiedad width especificada en "px" y "em":
Ejemplo de la propiedad CSS width con valores px y em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Palabras clave de dimensionamiento intrínseco
Además de las longitudes fijas y los porcentajes, width acepta palabras clave que dimensionan un elemento según su contenido en lugar de según su contenedor:
max-content— el ancho que el contenido desea si nunca se ajusta al siguiente renglón. Para un párrafo, es el texto completo en una sola línea.min-content— el ancho mínimo sin desbordamiento, es decir, el ancho de la palabra más larga que no se puede partir.fit-content— crece con el contenido comomax-content, pero nunca supera el espacio disponible, por lo que se ajusta al llegar al borde del contenedor. Ideal para cajas de "ajuste al contenido" como botones o etiquetas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>La caja min-content es tan estrecha como la palabra más larga, la caja max-content se extiende para ajustarse a toda la línea, y la caja fit-content se sitúa entre las dos según el espacio disponible.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | El navegador calculará el ancho para el elemento especificado. Este es el valor predeterminado. | Pruébalo » |
| length | Define el ancho en px, pt, cm, etc. | Pruébalo » |
| percentage | Define el ancho en porcentaje del elemento contenedor. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. | |
| fit-content | Calcula el ancho en función del tamaño intrínseco del contenido. | Pruébalo » |
| min-content | Calcula el ancho en función del tamaño mínimo del contenido. | Pruébalo » |
| max-content | Calcula el ancho en función del tamaño máximo del contenido. | Pruébalo » |
| stretch | Estira el elemento para rellenar el contenedor. | Pruébalo » |
Problemas comunes
- Un ancho en porcentaje sin un ancho de padre definido. Si el ancho del padre es
auto, un porcentaje puede no resolverse como se espera. Asigna al bloque contenedor un ancho explícito (o confía en el ancho completo natural de un elemento de bloque). - El relleno y el borde desbordan el diseño. Con el
content-boxpredeterminado, añadir relleno a un elemento con ancho del 100% hace que desborde su elemento padre. Cambia abox-sizing: border-boxpara mantener el total en el 100%. widthen elementos en línea se ignora. Primero establecedisplay: inline-blockoblock.- Diseño responsivo. Prefiere
max-widthsobre unwidthfijo para diseños fluidos:max-width: 600pxpermite que una caja se reduzca en pantallas pequeñas mientras la limita en las grandes.