CSS Height and Width
The height and width properties sets the height and width of an element.
By default the height and width has been set to auto. But it can also be specified in length values, like px, em, etc., or in percentage (%).
All CSS Dimension Properties
| Property | Description |
|---|---|
| height | It sets the height of an element |
| width | Sets the width of an element |
| max-height | It sets the maximum height of an element |
| max-width | It sets the maximum width of an element |
| min-height | It sets the minimum width of an element |
Height and Width in px
<html lang="en">
<head>
<title> CSS Height and Width </title>
<meta charset="UTF-8">
<style>
div {
height: 200px;
width: 350px;
background-color: #9396e6;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
<div></div>
</body>
</html>
Output
Height and Width on Image
<html lang="en">
<head>
<title> CSS Image Height and Width </title>
<meta charset="UTF-8">
</head>
<body>
<img src="PUBG.png" style="width:30%;"><br><br>
<img src="PUBG.png" style="width:35%;"><br> <br>
<img src="PUBG.png" width="300" height="150">
</body>
</html>
Output
The max-height Property
The max-height property sets the maximum height.
It means that the height of the element can never exceed the max-height length.
Even if user defines the height more than the specified maximum height, the browser will only display the maximum height.
For example, if the height is set to 100px and the max-height set to 50px, the actual height of the element would be 50px.
<html lang="en">
<head>
<title> CSS Dimension max-height</title>
<meta charset="UTF-8">
<style>
div {
height: 400px;
max-height: 100px;
background: #ac8def;
padding:10px;
}
p {
max-height: 100px;
background: #abf08c;
padding:10px;
}
</style>
</head>
<body>
<div>The maximum height of this div element is set to 100px, so it can't be taller than that.</div><br />
<p>In this example priority of max-height is more than height.</p>
</body>
</html>
Output
In this example priority of max-height is more than height.
The min-height Property
The min-height property sets the minimum height for the element which doesn't include paddings, borders, or margins. It ensures that an element has a minimum height even if it doesn't have any content.
An element will never be smaller than the minimum height specified. For example, if the height is set to 100px, and the min-height is set to 200px, the actual height of the element is 200px.
<html lang="en">
<head>
<title> CSS Dimension min-height </title>
<meta charset="UTF-8">
<style>
div {
height: 100px;
min-height: 200px;
background: #abf08c;
padding: 10px;
text-align:center;
}
p {
min-height: 100px;
background: #ac8def;
padding: 10px;
text-align:center;
}
</style>
</head>
<body>
<div>The minimum height of this div element is set to 200px, so it can't be smaller than that.</div>
<p>Enter some more line of text to see how it works.</p>
</body>
</html>
Output
Enter some more line of text to see how it works.
The max-width Property
The max-width property sets the maximum width for an element. It also doesn't include any paddings, margins or borders.
<html lang="en">
<head>
<title> CSS Dimension max-width </title>
<meta charset="UTF-8">
<style>
div {
width: 400px;
max-width: 300px;
background: #c9c0ff;
padding:10px;
}
p {
float: left;
max-width: 500px;
background: #F0E68C;
padding:10px;
}
</style>
</head>
<body>
<div>The maximum width of this div element is set to 300px, so it can't be wider than that.</div><br />
<p>Enter some text to see how it max-width works.</p>
</body>
</html>
Output
Enter some text to see how it max-width works.
The min-width Property
The min-width property sets the minimum width for an element. It also doesn't include any paddings, margins or borders. It ensures that an element has a minimum width even if it doesn't have any content.
<html lang="en">
<head>
<title> CSS Dimension min-width </title>
<meta charset="UTF-8">
<style>
div {
width: 300px;
min-width: 400px;
background: #FFC0CB;
padding: 10px;
text-align: center;
}
p {
float: left;
min-width: 400px;
background: #F0E68C;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div>The minimum width of this div element is set to 400px, so it can't be narrower than that.</div>
<p>Enter some text to see how min-width it works.</p>
</body>
</html>