हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS width Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
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 कीजिए
<!DOCTYPE html>
<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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
max-width Property
इस Property का इस्तेमाल किसी Element की अधिकतम यानि Maximum Width Set करने के लिए किया जाता हैं. जब आप किसी Element की Maximum Width Set कर देते हैं तो उस Element की Width इससे ज्यादा नहीं हो सकती हैं.
max-width Property के द्वारा Element को Responsive बनाने के लिए किया जाता हैं. ताकि Element उपलब्ध Viewport (Display Size) के अनुसार अपना आकार बदल सके.
इसे Try कीजिए
<!DOCTYPE html>
<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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
Note – इसका प्रभाव देखने के लिए ब्राउजर विंडो को छोटा कर के देखिए.
Min-property
इस Dimension Property द्वारा किसी Element की कम से कम यानि Minimum Width Set की जाती हैं. मतलब वह Element Set की गई कम से कम Width से कम Width में नही दिखाई देगा.
इसे Try कीजिए
<!DOCTYPE html>
<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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
