• Skip to primary navigation
  • Skip to main content

  • Home
  • Tutorials
    • Computer Tutorial
    • Internet Tutorial
    • Windows Tutorial
    • Android Tutorial
    • MS Office
      • MS Word Tutorial
      • MS Excel Tutorial
      • MS PowerPoint Tutorial
    • HTML Tutorial
    • CSS Tutorial
    • WordPress Tutorial
    • Blogger Tutorial
    • MS Paint Tutorial
    • WordPad Tutorial
    • Notepad Tutorial
    • Paytm Tutorial
    • WhatsApp Tutorial
  • How To
  • Articles
  • Career Guide
  • Video Tutorials
  • Books
  • Courses

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

अंतिम सुधार September 17, 2018 लेखक TP Staff

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

Table of Content

  1. CSS Width Property का परिचय – Introduction to CSS Width in Hindi.
  2. Different Type of Width Property
    • width Property
    • max-width Property
    • min-width Property
  3. आपने क्या सीखा?

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>

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

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 कीजिए

<!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>

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

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 कीजिए

<!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>

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

This is a Paragraph.

Note – इसका प्रभाव देखने के लिए ब्राउजर विंडो को छोटा कर के देखिए.

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

इस Tutorial में हमने आपको CSS Width Property के बारे में बताया हैं. आपने किसी भी HTML Element के लिए Maximum और Minimum Width Set करना भी सीखा हैं. हमे उम्मीद हैं कि यह Lesson आपके लिए उपयोगी साबित होगा.

About TP Staff

लेखक: TP Staff

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

Join TutorialPandit on Telegram
Use Filmora video editor to express your creativity and amaze with beautiful results.

Reader Interactions

Leave a Reply Cancel reply

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

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy