
Una propiedad width en CSS esta establece el ancho de un elemento. De forma predeterminada, esta propiedad se usa para especificar el ancho del área de contenido, pero si la propiedad se box-sizing
establece en ella, border-box
establece el ancho del elemento comenzando desde el borde exterior del cuadro.
Funciones width css
Valor inicial | auto |
---|---|
Aplicado a | Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas. |
Heredable | No |
Móvil | Sí |
Valor calculado | Porcentaje, longitud absoluta o palabra reservada auto . |
/* es una palabra reservada */ width: auto; /* <length> longitudes */ width: 120px; width: 10em; /* <porcentaje> porcentajes */ width: 75%; /* valores globales */ width: inherit; width: initial; width: unset;
Beneficios importantes min-width
y max-width
tienen prioridad sobre la propiedad width
.
Ejemplos y aplicaciones en código
Ejemplo de uso de longitudes absolutas <length>
con la propiedad width
para especificar el ancho de los elementos:
< div class = "px_length" > px ancho medido en píxeles </ div > < div class = "em_length" > ancho em medido en píxeles </ div >
Código CSS:
div { border: 2px solid black; padding: 2em; margin: 2em; } .px_length { width: 200px; } .em_length { width: 20em; }
Como en este ejemplo, ajusta el ancho del width
elemento usando porcentajes, recuerde que el valor será relativo al ancho del elemento que contiene el elemento de destino:
< div class = "percent" > ancho como porcentaje </ div >
Código CSS:
.percent { width: 20%; border: 2px solid black; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 3,0 | 4.0 | 4.0 | 1.0 |
Características generales
La propiedad acepta width
uno de los siguientes valores:
<length>
Determina el ancho en longitudes absolutas.
<percentage>
Especifica el ancho como un porcentaje del ancho del elemento de bloque que contiene el elemento actual.
auto
El navegador calculará automáticamente el valor de representación del elemento.
Estructura width css
width: auto | [ <length> | <percentage> ];
Consulte también
- La página de propiedades
box-sizing
que se utiliza para modificar el modelo de caja predeterminado. - La página de propiedades
height
que especifica la altura de los elementos.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS