CSS width Property

Set the height and width of a <p> element:

p.ex {
height: 100px;
width: 100px;
}

Try it Yourself »

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

Set the width of an <img> element using a percent value:

img {
width: 50%;
}

Try it Yourself »

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;
}

Try it Yourself »