It establishes the highest possible height for the content area of the element. This indicates that the content box's height can be less than the defined max-height, but it cannot exceed it. Essentially, it defines the maximum limit for the element's height.
When the size of the content exceeds the maximum height limit, overflow will occur. If the content is smaller than the maximum height specified, this attribute remains inactive. This feature guarantees that the height value will never surpass the max-height value set and prohibits the use of negative values.
Occasionally, restricting the height of an element within a specific range can be beneficial.
Syntax
max-height: none | length | initial | inherit;
The specifications of this CSS attribute are outlined in the following manner.
none: It represents the default value that imposes no restrictions on the dimensions of the content box.
The length property specifies the maximum height in pixels, centimeters, points, etc.
It establishes the attribute to its initial default setting.
It acquires the property from its parent element.
Now, let's see an example of this CSS property.
Example
In this instance, we have four paragraph elements containing content. We are setting the maximum height of these paragraphs by specifying the length value of the max-height property. The initial paragraph has a maximum height of 60 pixels, the second paragraph is set to 6 ems, the third paragraph is defined as 130 points, and the fourth paragraph is 5 centimeters in height.
The text within the initial paragraph exceeds the specified max-height property value, causing the content to extend beyond the boundaries of the content box in the rendered output.
<!DOCTYPE html>
<html>
<head>
<title>
max-height property
</title>
<style>
p{
border: 4px solid blue;
background-color: lightblue;
font-size: 20px;
}
#px {
max-height: 60px;
}
#em {
max-height: 6em;
}
#pt {
max-height: 130pt;
}
#cm {
max-height: 5cm;
}
</style>
</head>
<body>
<h2> max-height: 60px; </h2>
<p id = "px">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<br>
<h2> max-height: 6em; </h2>
<p id = "em">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-height: 130pt; </h2>
<p id = "pt">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-height: 5cm; </h2>
<p id = "cm">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
Output