Categories
CSS

CSS height Property क्या हैं पूरी जानकारी हिंदी में?

इस Tutorial में हम आपको CSS height Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.

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 के बारे में बताया जा रहा हैं.

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>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

This is a Paragraph. This paragraph text has written in English. This paragraph height is 150px wide and has a red border with 3px.

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>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

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.

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>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

This is a Paragraph.

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Dimensions की Height Property की पूरी जानकारी दी हैं. और आपने किसी Elements की Maximum एवं Minimum Height Set करना भी सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

#BeDigital

लेख आपको पसंद आया?
👍👎

By TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Leave a Reply

Your email address will not be published. Required fields are marked *