CSS height Property
Introduction to CSS height Property
Width की तरह ही किसी element की height भी आप CSS द्वारा define कर सकते है। इसके लिए CSS में height property available है। यह property किसी भी element द्वारा vertically occupy किया जाने वाला space define करने के लिए प्रयोग की जाती है।
ज्यादातर HTML elements की height उनके content के अनुसार होती है। यदि आप चाहे तो height property द्वारा इस height को fix कर सकते है। लेकिन ऐसा करते समय आपको सावधानी रखनी चाहिए क्योंकि यदि आप content को show होने के लिए पर्याप्त height नहीं define करते है तो content box से बाहर overflow हो जाता है।
इसलिए ये ध्यान रखना जरुरी है की define की जाने वाली height में content आसानी से show हो सके। उदाहरण के लिए यदि आप किसी paragraph की height 300px define करते है लेकिन उसका text बहुत अधिक है तो वह text paragraph border को overlap करके बाहर show होने लगेगा।
हालाँकि overflow की समस्या से बचने के लिए CSS में overflow property available है लेकिन इस property को सभी elements के लिए नहीं use किया जाना चाहिए। यह property fixed layout create करने के लिए use की जाती है।
Overflow property के बारे में विस्त्रत जानकारी के लिए CSS overflow property in Hindi tutorial पढ़े।
Syntax of CSS height Property
CSS height property का general syntax निचे दिया जा रहा है।
height : auto | number-px | number-%;
जब height property की value auto define की जाती है तो height automatically content के अनुसार set की जाती है। इसके अलावा आप height को pixels और percentage के रूप में भी define कर सकते है। जब आप height को percentage के रूप में define करते है तो webpage की total height की उतनी percent height ही वह element लेता है।
Example of CSS height Property
CSS height property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS height Property Demo</title>
<style>
p
{
height : 200px;
width : 200px;
}
</style>
</head>
<body>
<p>
IT industry of India have shown a remarkable growth in past few years. And now experts says that it is likely to grow more.
</p>
<p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS min-height Property
Elements की minimum height define करने के लिए CSS में min-height property available है। जब आप किसी element के लिए यह property define करते है तो उस element की height इस property द्वारा define की गयी height से कम नहीं हो सकती है।
इस property की value आप pixels और percentage में define कर सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS min-height Property Demo</title>
<style>
p
{
width:300px;
min-height:300px;
}
</style>
</head>
<body>
<p>Trees are very crucial for our environment. It is our duty to protect them. We should plant more trees to make our environment cleaner.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS max-height Property
Elements की maximum height define करने के लिए CSS में max-height property available है। जब इस property को किसी element के लिए define किया जाता है तो उस element की height इस property द्वारा define की गयी value से अधिक नहीं हो सकती है।
इस property की value भी आप pixels और percentage में दे सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS max-height Property Demo</title>
<style>
p
{
width:300px;
max-height:40px;
border:1px solid #eeeeee;
}
</style>
</head>
<body>
<p>Trees are very crucial for our environment. It is our duty to protect them. We should plant more trees to make our environment cleaner.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
