More “Try it Yourself” examples below.
Definition and Usage
The width property sets the width of an element.
Note: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!
Note: The min-width and max-width properties override width.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable – Try it |
| Version: | CSS1 |
| JavaScript syntax: | object.style.width=”500px” Try it |
CSS Syntax
width: auto|value|initial|inherit;
Property Values
| Value | Description |
|---|---|
| auto | Default value. The browser calculates the width |
| length | Defines the width in px, cm, etc. |
| % | Defines the width in percent of the containing block |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Example
Set the width of an <input type=”text”> element to 100px. However, when it gets focus, make it 250px wide:
input[type=text] {
width: 100px;
}input[type=text]:focus {
width: 250px;
}
