Ejemplo
Ajuste la altura y la anchura de un <p> elemento:
p.ex
{
height: 100px;
width: 100px;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de profundidad establece el ancho de un elemento.
Note: La propiedad de ancho no incluye el relleno, las fronteras y los márgenes; que establece el ancho de la zona en el interior del relleno, borde, y el margen del elemento!
Note: El min-width y max-ancho de Modificación de propiedades de ancho.
| Valor por defecto: | auto |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS1 |
| la sintaxis de JavaScript: | object .style.width="500px" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
sintaxis CSS
width: auto|value|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| auto | Valor por defecto. El navegador calcula el ancho | Juegalo " |
| length | Define la anchura en píxeles, cm, etc. | Juegalo " |
| % | Define la anchura en porcentaje del bloque de contención | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Ajuste el ancho de un <img> elemento mediante un valor porcentual:
img {
width: 50%;
} Inténtalo tú mismo " Ejemplo
Ajuste el ancho de un <input type = "text"> elemento de 100px. Sin embargo, cuando se pone el foco, que sea 250 píxeles de ancho:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS Dimensión
CSS tutorial: modelo de caja CSS
Referencia CSS: height property
Referencia HTML DOM: width property