CSS WIDTH/HEIGHT
In CSS, the height and width properties are used to set the height and width of an element.
Height and width property do not include padding, borders, or margins.
It sets the height/width of the area inside the padding, border, and margin of the element. Its value can be in px, %, cm etc.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 40%;
background-color: orange;
}
</style>
</head>
<body>
<div> Set the height and width of an element.</div>
</body>
</html>
Output:
Set the height and width of an element.
Height and width of Image
The height and width property is also used to set the height and width of an image. It’s value can be in px, cm, percent, … etc.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
width:300px;
height:200px;
}
</style>
</head>
<body>
<h3>Set the width and height of an Image</h3>
<img class="myclass" src="img/img2.jpg">
</body>
</html>
Output:
Set the width and height of an Image
Setting max-width
Max-width property is used when we need the code to be responsive to the browser dimensions. This property sets the maximum width of an element.
The max-width can be specified in px, cm, % (of the containing block), or set to none. None is the default value. It means that there is no maximum width.
So, when the browser window shrinks and becomes lesser than the defined element width, the browser automatically adds a horizontal scrollbar to the page.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
max-width:600px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="myclass">
<p>Using max-width for making content responsive</p>
</div>
</body>
</html>
Setting min-width
Min-width works the similar way as max-width. Here we define the minimum width of the element and the effects can be seen when the browser window is resized.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.myclass {
min-width:600px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="myclass">
<p>Using min-width for making content responsive</p>
</div>
</body>
</html>
Setting max-height
Max-height is used to set the maximum height of the box.
Example:
.myclass{
max-height:100px;
border:2px solid black;
}
Setting min-height
It is used to set the minimum height of the box. Let's take a look at an example:
.myclass {
min-height:50px;
border:2px solid black;
}