HTML के किसी भी element को height देने के लिए height property का use किया जाता है।
Syntax
element{
height : 20px;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS height Example by Technalay </title>
</head>
<body>
<p style="border:2px solid red; height:50px;">CSS height Example by Technalay</p>
</body>
</html>CSS height Example by Technalay
CSS height values
CSS में height property अकेले काम नहीं करता इसके लिए कुछ value assign करना पड़ता है। जो इस प्रकार है :
- auto
- length
- %
- inherit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS height Example by Technalay </title>
</head>
<body>
<p style="background-color: violet; height : 60px;">element with 60px height</p>
<p style="background-color: hotpink; height : 5cm;">element with 5cm height</p>
<p style="background-color: lightblue; height : auto;">element with auto height</p>
<p style="background-color: lightgreen; height : initial;">element with initial height</p>
<p style="background-color: gold; height : inherit;">element with inherit</p>
</body>
</html>element with 60px; height
element with 5cm; height
element with auto height
element with initial height
element with inherit
CSS min-height and max-height property
इसके मदद से भी किसी element के height को define किया जाता है।
आइये इसे एक एक करके समझने का प्रयास करते है :
CSS min-height
इस property के मदद से किसी भी element का minimum height define किया जाता है। इसको एक बार define करने के बाद उस element का height कम नहीं हो सकता है।
element{
min-height : 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS min-height Example by Technalay </title>
</head>
<body>
<p style="background-color: violet; min-height : 60px;">CSS min-height Example by Technalay</p>
</body>
</html>CSS max-height
इस property के मदद से किसी भी element का minimum height define किया जाता है। इसको एक बार define करने के बाद उस element के height को बढ़ाया नहीं जा सकता है।
element{
max-height : 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS min-height Example by Technalay </title>
</head>
<body>
<p style="background-color: violet; max-height : 60px;">CSS max-height Example by Technalay</p>
</body>
</html>related querry 🚀