Características width en CSS

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.