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

WhatsApp Group Join Now
Telegram Group Join Now

हेल्लो दोस्तों! आज हम इस आर्टिकल में  CSS Height Property  के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है | इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-

CSS Height Property क्या हैं पूरी जानकारी हिंदी में? - 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 text properties in hindi-css टेक्स्ट प्रॉपर्टीज क्या है? - Hindi tutorial

CSS height Property के विभिन्न प्रकार –

HTML Element की Height Set करने के लिए कई Different Properties Provide करवाई जाती हैं. जिनके द्वारा आप Element की Height को अपने हिसाब से Control कर सकते हैं. नीचे अलग-अलग height Properties के बारे में बताया जा रहा हैं.

1. height Property

 

इस Dimension Property द्वारा Elements की Height Set की जाती हैं. जिसकी Value आप pxcmpt या % में 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

WhatsApp Group Join Now
Telegram Group Join Now

 

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>

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

इसे पढ़े :-  CSS width Property क्या हैं पूरी जानकारी हिंदी में? - Hindi Tutorial

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>

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

Leave a Reply

error: Content is protected !!