Advertisement

Advertisement


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


<!DOCTYPE html>
<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

CSS Height and Width

Height and Width on Image


<!DOCTYPE html>
<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

CSS Image Height and Width




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.


<!DOCTYPE html>
<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

CSS Dimension max-height
The maximum height of this div element is set to 100px, so it can't be taller than that.

In this example priority of max-height is more than height.


Note : The auto and % allows the browser to calculate the width automatically, acourding to the content.

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.


<!DOCTYPE html>
<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

CSS Dimension min-height
The minimum height of this div element is set to 200px, so it can't be smaller than that.

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.


<!DOCTYPE html>
<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

CSS Dimension max-width
The maximum width of this div element is set to 300px, so it can't be wider than that.

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.


<!DOCTYPE html>
<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>

Output

CSS Dimension min-width
Lorem ipsum dolor sit amet, consectetur adipiscing elit.



Lorem ipsum dolor sit amet, consectetur adipiscing elit.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.