CSS Height/Width
An element’s height and width can be set using the CSS height and width attributes.
An element’s maximum width can be set using the CSS max-width property.
CSS Setting height and width
An element’s height and width can be set using the height and width attributes.
Padding, borders, and margins are not included in the height and width values. It establishes the area’s height and width inside the element’s padding, border, and margin.
CSS height and width Values
The height and width properties may have the following values:
- auto – This is default. The browser calculates the height and width
- length – Defines the height/width in px, cm, etc.
- % – Defines the height/width in percent of the containing block
- initial – Sets the height/width to its default value
- inherit – The height/width will be inherited from its parent value
CSS height and width Values
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: Recall that padding, borders, and margins are not included in the height and width attributes! Inside the element’s padding, border, and margin, they set the area’s height and width!
Setting max-width
An element’s max-width can be set using the max-width property.
The max-width can be set to none by default, or it can be provided in length values such as px, cm, etc., or in percent (%) of the contained block. denotes the absence of a maximum width.
When the browser window is less than the element’s (500px) width, the <div> above becomes problematic. The page then has a horizontal scrollbar added by the browser.
In this case, using max-width will help the browser handle small windows better.
Tips: the differences between the two divs, try dragging the browser window to a width of less than 500 pixels!
Note: The max-width property will be used (while the width property is disregarded) if you use both the width and max-width properties on the same element for any reason and the width property’s value is greater than the max-width property.
Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Try it Yourself - Examples
Determine the components’ height and width.
This example shows you how to set the width and height of various items.
Use % to set an image’s height and width.
This example shows you how to use a percent number to set the width and height of an image.
An element’s minimum and maximum widths can be set
This example shows how to use a pixel value to set an element’s minimum and maximum widths.
Set an element’s minimum and maximum heights.
This example shows how to use a pixel value to set an element’s minimum and maximum height.
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 |
