इस Tutorial में हम आपको CSS height Propertyin Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
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 कर सकते हैं.
</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 नही होगा.
</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 आपके लिए उपयोगी साबित होगा.
