हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS Height Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है | इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS Height Property का परिचय –
CSS Dimension की दूसरी Property CSS height Property होती हैं. इसकी पहली Property width होती हैं. जिसके बारे में हम पहले ही बता चुके हैं.
किसी Element द्वारा Browser Window में Vertically जितना Space लिया जाता हैं, वह उस Element की Height यानि ऊंचाई कहलाती हैं.
जब किसी Element की Height Set की जाती हैं तो वह केवल Element के Content Area की Height होती हैं. इसमें Padding, Border, और Margin शामिल नहीं रहता हैं.
यदि आप किसी Element की Actual Height के बारे में जानना चाहते हैं तो आप हमारे CSS Box Model Tutorial को पढ सकते हैं.
By Default किसी Element की Height Auto Set रहती हैं जो Browser द्वारा निर्धारित की जाती हैं. क्योंकि अधिकतर Element के लिए Height को Set भी नही किया जाता हैं. जिसे आप CSS height की विभिन्न Properties द्वारा Set कर सकते हैं.
CSS height Property के विभिन्न प्रकार –
HTML Element की Height Set करने के लिए कई Different Properties Provide करवाई जाती हैं. जिनके द्वारा आप Element की Height को अपने हिसाब से Control कर सकते हैं. नीचे अलग-अलग height Properties के बारे में बताया जा रहा हैं.
1. height Property
इस Dimension Property द्वारा Elements की Height Set की जाती हैं. जिसकी Value आप px, cm, pt या % में Define कर सकते हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Height Examples</title>
<style type=”text/css”>
p {
height: 150px; border: 3px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph
height is 300px and has a red border with 3px.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
2. max-height Property
max-height Property द्वारा Elements की अधिकतम ऊँचाई यानि Maximum Height को निर्धारित किया जाता हैं. जब आप किसी Element की Maximum Height Declare कर देते हैं तो वह Element उसी Height में Show होता हैं.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Maximum Height Examples</title>
<style type=”text/css”>
p {
max-height: 30px; border: 3px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s
maximum height is 30px and has a red border with 3px. This is a Paragraph.
This paragraph text has written in English. This is a Paragraph. This paragraph text
has written in English.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
3. min-property
इस Property द्वारा Elements की कस से कम ऊँचाई यानि Minimum Height को Set किया जाता हैं. यानि अब यह Element इससे कम Height में Show नही होगा.
इसे Try कीजिए
<!DOCTYPE html>
<html>
<head>
<title>CSS Minimum Height Examples</title>
<style type=”text/css”>
p {
min-height: 100px; border: 3px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s
minimum height is 100px and has a red border with 3px.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
