CSS Max-Height Property

In this chapter you will learn:
About max-height property
Values of this property
Example of this property
CSS max-height property is used to specify the maximum height of element. This property can fix the maximum height of tag or element so you can’t increase the height of element from its max-height which is defined with this property. Its default value is none so if max-height is not defined then you can set the height of element as you want.
Values of this property
Values Description
initial Specify the default value
none No max height is specified
% Specify maximum height in % (percent)
Inherit Inherit value form parent property

Example of this property: 
<html>
<head>
    <title>Example of max-height property</title>
    <style type="text/css">
   #a
   {
      max-height:40px; /*maximum height is 40 px */
      background-color:cyan;
   }
    </style>
    </head>
<body>
<div> This is the example of max-height property</div><br/><br/>
<div id="a"> This is the example of max-height property. <br/>
The maximum height of this division has set to 80px so <br/>
it will only show the background-color to the maximum height (40px)</div>
</body>
</html>

Guide:-
When you run the given program then you will get that the division which has id "a" is displayed in maximum height so the background color is applied only to the maximum height (40px).
Output:-
example of font-size property

Summary

In this chapter, you have learned about a max-height property of CSS so now you can use it in your program if required. Some other properties are given in next chapter so click on Next button to continue-

 

Share your thought