In CSS height and width property are used to set the height and width of an HTML element.
There are several type of value for CSS height and width:
auto - This is by default. The browser calculates the height and width automatically.
length - Specify the height/width in px, cm etc.
% - Specify the height/width in percentage.
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value.
In the below example we set a height and width for an div element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
width: 100%;
background-color: palegreen;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 300px and a width of 100%:</p>
<div></div>
</body>
</html>
Height and width of Image It is used to set the height and width of an image. It’s value can be in px, cm, percent, … etc.
<!DOCTYPE html>
<html>
<head>
<title>Height and width of image</title>
<style>
.image {
width:300px;
height:200px;
border:3px solid black;
}
</style>
</head>
<body>
<h3>Set the width and height of an Image</h3>
<img class="image" src="4.jpg">
</body>
</html>
The max-width property is used to set the maximum width of an HTML element. The max-width can be defined 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).
<!DOCTYPE html>
<html>
<head>
<title>max-width of element</title>
<style>
.container {
max-width:400px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container">
<h3>Students Tutorial</h3>
<p>The max-width can be defined 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).
</p>
</div>
</body>
</html>