CSS Height, Width and Max-width
CSS Height, Width and Max-width
The CSS height and
width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element.
Try it Yourself »
CSS Set height and width
The height and
width properties are used to set the
height and width of an element.
The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and
width properties
can have the following values:
auto- This is default. The browser calculates the height and widthlength- Defines the height or width in px, cm, em, etc.%- Defines the height or width in percent of the containing blockinitial- Sets the height or width to its default valueinherit- The height or width will be inherited from its parent value
CSS height and width Examples
Example
Set the height and width of a <div> element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Example
Set the height and width of another <div> element:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Note: Remember that 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!
CSS Using max-width
The max-width property sets the maximum
allowed width of an element. This prevents the width of an element to be larger
than the max-width
property value.
The max-width
property can have the following values:
length- Defines the maximum width in px, cm, etc.%- Defines the maximum width in percent of the containing blocknone- This is default. Means that there is no maximum width
One problem with the
width
property can occur when the browser window is smaller than the width of
the element. The browser then adds a horizontal scrollbar to the page.
So, using
max-width will improve the browser's handling on small windows.
CSS max-width Examples
Drag the browser window to smaller than 600px wide, to see the difference between the two divs below!
Using width:
Using max-width:
Example
One <div> element with a max-width of 500 pixels, and one <div> element with a width of 500 pixels:
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
Note: If you use both the
width property and the
max-width property on the same element, and the value of the
width property is larger than the
max-width property; the
max-width property
value will be used!
Example
A <div> element with both a width and a max-width property:
.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
Try it Yourself - Examples
Set the height and width of elements
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.
Set min-width and max-width of an element
This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.
Set min-height and max-height of an element
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.
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 |
