Dimensions in CSS: To specify the height and width of an element you can use height and width properties. It does not specify the borders, margins, and padding, it just sets the height and width inside the border, margins, and padding for an HTML element.
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 Height and Width Values
The CSS height and width properties might have the following values
| Auto | This is the default. The browser calculates the height and width |
| Length | Specify the height and width in px, cm, etc. |
| % | Specify the height and width in percent of the containing block |
| Initial | Provides the height and width to its default value |
| Inherit | The height and width will be inherited from its parent value |
CSS Height and Width with <div> Example
The height and width of a <div> element:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 250px;
width: 70%;
background-color: #618685;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 250px and a width of 70%:</p>
<div></div>
</body>
</html>
CSS Height and Width with <div> Example Output
Setting Max-Width
To set a maximum width for an element the max-width property is used. The max-width can be defined in length values such as cm, px,% for a containing block or none which is a default by the way. With the above <div> problem is if the browser window is small than the width of the element(300px) then the browser should add a scrollbar to the page. The usage of max-width in this kind of situation will make more effect on small windows.
Max-Width Example
This <div> element has a height of 70 pixels and a max-width of 300 pixels:
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 300px;
height: 70px;
background-color:#618685 ;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 70px and a max-width of 300px:</p>
<div></div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Max-Width Example Example Output
