CSS Height and Width This element has a width of 100%. Setting height and width The height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block. This element has a height of 200 pixels and a width of 50% Example div { height: 200px; width: 50%; background-color: powderblue; } This element has a height of 100 pixels and a width of 500 pixels. Example div { height: 100px; width: 500px; background-color: powderblue; } Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element! Setting max-width The max-width property is used to set the maximum width of an element. The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width). The problem with the
above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows. Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs! This element has a height of 100 pixels and a max-width of 500 pixels. Note: The value of the max-width property overrides width. The following example shows a
element with a height of 100 pixels and a max-width of 500 pixels: Example div { max-width: 500px; height: 100px; background-color: powderblue; } examples --------

Set the height and width of an element

This div element has a height of 200px and a width of 50%:

Set the height and width of an element

This div element has a height of 100px and a width of 500px:

Set the max-width of an element

This div element has a height of 100px and a max-width of 500px:

Resize the browser window to see the effect.

The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px.

The maximum width of this paragraph is set to 100px.

The minimum height of this paragraph is set to 100px.

The minimum width of this paragraph is set to 150px.

All CSS Dimension Properties ---------------------------- Property Description height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element CSS max-height Property ----------------------- Example Set the maximum height of a

element: p { max-height: 50px; } Definition and Usage The max-height property is used to set the maximum height of an element. This prevents the value of the height property from becoming larger than max-height. Note: The value of the max-height property overrides height. Default value: none Inherited: no Animatable: yes, see individual properties. Read about animatable Version: CSS2 JavaScript syntax: object.style.maxHeight="100px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property max-height 1.0 7.0 1.0 2.0.2 7.0 CSS Syntax max-height: none|length|initial|inherit; Property Values Value Description Play it none No maximum height. This is default length Defines the maximum height in px, cm, etc. % Defines the maximum height 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 CSS max-width Property ---------------------- Example Set the maximum width of a

element: p { max-width: 100px; } Definition and Usage The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. Note: The value of the max-width property overrides width. Default value: none Inherited: no Animatable: yes, see individual properties. Read about animatable Version: CSS2 JavaScript syntax: object.style.maxWidth="600px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property max-width 1.0 7.0 1.0 2.0.2 7.0 CSS Syntax max-width: none|length|initial|inherit; Property Values Value Description Play it none No maximum width. This is default length Defines the maximum width in px, cm, etc. % Defines the maximum 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 CSS min-height Property ----------------------- Example Set the minimum height of a

element: p { min-height: 100px; } Definition and Usage The min-height property is used to set the minimum height of an element. This prevents the value of the height property from becoming smaller than min-height. Note: The value of the min-height property overrides both max-height and height. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable Version: CSS2 JavaScript syntax: object.style.minHeight="400px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property min-height 1.0 7.0 3.0 2.0.2 4.0 CSS Syntax min-height: length|initial|inherit; Property Values Value Description Play it length Default value is 0. Defines the minimum height in px, cm, etc. % Defines the minimum height 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 CSS min-width Property ---------------------- Example Set the minimum width of a

element: p { min-width: 150px; } Definition and Usage The min-width property is used to set the minimum width of an element. This prevents the value of the width property from becoming smaller than min-width. Note: The value of the min-width property overrides both max-width and width. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable Version: CSS2 JavaScript syntax: object.style.minWidth="400px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property min-width 1.0 7.0 1.0 2.0.2 4.0 CSS Syntax min-width: length|initial|inherit; Property Values Value Description Play it length Default value is 0. Defines the minimum width in px, cm, etc. % Defines the minimum 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 CSS height Property ------------------- Example Set the height and width of a paragraph: p.ex { height: 100px; width: 100px; } More "Try it Yourself" examples below. Definition and Usage The height property sets the height of an element. Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element! Note: The min-height and max-height properties override height. Default value: auto Inherited: no Animatable: yes. Read about animatable Version: CSS1 JavaScript syntax: object.style.height="500px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property height 1.0 4.0 1.0 1.0 7.0 CSS Syntax height: auto|length|initial|inherit; Property Values Value Description Play it auto The browser calculates the height. This is default length Defines the height in px, cm, etc. % Defines the height 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 More Examples Example Set the height of an element using a percent value: img { height: 50%; } CSS width Property ------------------ Example Set the height and width of a

element: p.ex { height: 100px; width: 100px; } 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 Version: CSS1 JavaScript syntax: object.style.width="500px" Browser Support The numbers in the table specify the first browser version that fully supports the property. Property width 1.0 4.0 1.0 1.0 3.5 CSS Syntax width: auto|value|initial|inherit; Property Values Value Description Play it 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 More Examples Example Set the width of an element using a percent value: img { width: 50%; } Example Set the width of an element to 100px. However, when it gets focus, make it 250px wide: input[type=text] { width: 100px; } input[type=text]:focus { width: 250px; }