The min-height property in CSS is used to set the minimum height of an element. The min-height property is used when the content of the element is smaller than the min-height and if the content is larger than the min-height then it has no effect. This property ensures that the value of the height property is not less than the specified min-height value of the element in consideration.
Syntax:
min-height: length|initial|inherit;
Property Value:
- length: This property is used to set the min-height. The default value of length is 0. The height can be set in the form of px, %, cm etc.
- initial: It is used to set the value of min-height property to its default value.
- inherit: This property is inherited from its parent.
Example: In this example, we are using the min-height: length property.
html
<!DOCTYPE html><html>
<head>
<title>
min-height property
</title>
<style>
p {
min-height: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</body>
</html>
|
Output:
Example: In this example, we are using the min-height: initial property.
html
<!DOCTYPE html><html>
<head>
<title>
min-height property
</title>
<style>
p {
min-height: initial;
border: 1px solid black;
}
</style>
</head>
<body>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by min-height property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 7.0
- Firefox 3.0
- Safari 1.3
- Opera 4.0