इस Tutorial में हम आपको CSS Width Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
Table of Content
CSS Width Property का परिचय
कोई Element Horizontally जितनी जगह Browser Window में लेता हैं. वह उस Element की Width कहलाती हैं.
width Property द्वारा केवल Element Content Area की Width Set होती हैं. इसमें Padding, Border और Margin शामिल नहीं रहता हैं. इसके बारे में अधिक जानकारी के लिए आप हमारे CSS Box Model Tutorial को पढ सकते हैं.
By Default प्रत्येक Element के लिए Width Set रहती हैं. इस Situation में Browser Elements के लिए Width Calculate करता हैं. यदि आप Auto पर निर्भर नही रहना चाहते हैं तो आप किसी भी Element की Width px, cm, pt और % में Set कर सकते हैं.
CSS Width Property के विभिन्न प्रकार
Element की Width Set करने के लिए CSS द्वारा कई Width Properties उपलब्ध करवाई जाती हैं. इन Properties के द्वारा आप Element की Width को Control कर सकते हैं.
width Property
width Property का इस्तेमाल Element की Width Set करने के लिए किया जाता हैं. मतलब आप किसी Particular Element को Webpage पर Horizontally कितना Space देना चाहते हैं. आइए इसे एक उदाहरण से समझते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS Width Examples</title><style type=”text/css”>
p {
width: 300px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.
max-width Property
इस Property का इस्तेमाल किसी Element की अधिकतम यानि Maximum Width Set करने के लिए किया जाता हैं. जब आप किसी Element की Maximum Width Set कर देते हैं तो उस Element की Width इससे ज्यादा नहीं हो सकती हैं.
max-width Property के द्वारा Element को Responsive बनाने के लिए किया जाता हैं. ताकि Element उपलब्ध Viewport (Display Size) के अनुसार अपना आकार बदल सके.
इसे Try कीजिए
<html>
<head>
<title>CSS Maximum Width Examples</title><style type=”text/css”>
p {
max-width: 300px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph. This paragraph text has written in English. This paragraph is 300px wide and has a red border with 3px.
Note – इसका प्रभाव देखने के लिए ब्राउजर विंडो को छोटा कर के देखिए.
min-property
इस Dimension Property द्वारा किसी Element की कम से कम यानि Minimum Width Set की जाती हैं. मतलब वह Element Set की गई कम से कम Width से कम Width में नही दिखाई देगा.
इसे Try कीजिए
<html>
<head>
<title>CSS Minimum Width Examples</title><style type=”text/css”>
p {
min-width: 400px; border: 3px solid red;
}</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph’s minimum width is 400px and has a red border with 3px.</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This is a Paragraph.
Note – इसका प्रभाव देखने के लिए ब्राउजर विंडो को छोटा कर के देखिए.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Width Property के बारे में बताया हैं. आपने किसी भी HTML Element के लिए Maximum और Minimum Width Set करना भी सीखा हैं. हमे उम्मीद हैं कि यह Lesson आपके लिए उपयोगी साबित होगा.
Leave a Reply