CSS Box Model in Hindi

CSS Box Model क्या है?

CSS Box Model CSS का एक बहुत important concept है। Web designing में लगभग हर HTML element को एक rectangular box की तरह समझा जा सकता है। इस box की size और उसके आसपास की spacing को समझने के लिए CSS Box Model का इस्तेमाल किया जाता है।

CSS Box Model में मुख्य रूप से चार parts होते हैं:

• Content – Element का actual content
• Padding – Content और Border के बीच की अंदरूनी जगह
• Border – Element की boundary
• Margin – Border के बाहर की खाली जगह

इन चारों parts को समझना इसलिए जरूरी है क्योंकि किसी element की actual size और दूसरे elements के बीच की spacing इन्हीं properties से प्रभावित होती है।

CSS Box Model के चार मुख्य Parts

1. Content

Content box का सबसे अंदर वाला हिस्सा होता है। इसमें actual text, image, button या कोई दूसरा HTML content हो सकता है। जब हम किसी element को width और height देते हैं, तो default box-sizing: content-box; होने पर ये values केवल content area पर लागू होती हैं।

2. Padding

Padding content और border के बीच की अंदरूनी खाली जगह होती है। Padding बढ़ाने पर content और border के बीच distance बढ़ जाती है।

Padding को चारों directions में अलग-अलग भी दिया जा सकता है:

• padding-top
• padding-right
• padding-bottom
• padding-left

एक ही declaration में चार values देने पर उनका क्रम होता है: Top → Right → Bottom → Left.

Padding की अलग-अलग Values

चार values का इस्तेमाल करके हम चारों sides पर अलग-अलग padding दे सकते हैं:

3. Border

Border padding के बाहर और margin के अंदर मौजूद boundary होती है। Border किसी element की सीमा को visually दिखाने के लिए उपयोग की जाती है।

Border में सामान्य रूप से तीन चीजें define की जाती हैं:

• Border Width – Border कितनी मोटी होगी
• Border Style – Border solid, dashed, dotted आदि कैसी होगी
• Border Color – Border का color क्या होगा

Common Border Styles

• solid – लगातार दिखाई देने वाली line
• dashed – टूटी हुई line
• dotted – छोटे dots वाली line
• double – दो lines वाली border
• none – कोई border नहीं

4. Margin

Margin element की border के बाहर की खाली जगह होती है। इसका उपयोग element और उसके आसपास मौजूद दूसरे elements के बीच spacing बनाने के लिए किया जाता है।

Padding के विपरीत, margin element के अंदर की जगह नहीं बढ़ाता बल्कि element के बाहर space create करता है।

Margin की अलग-अलग Directions

Margin को भी चारों sides पर अलग-अलग define किया जा सकता है:

Box Model में Width और Height कैसे Calculate होती है?

CSS Box Model को समझते समय एक important बात यह है कि default रूप से width और height केवल content area की size को define करते हैं। Padding और border जोड़ने के बाद element की total size बढ़ सकती है।

उदाहरण के लिए यदि किसी element की:

• Content width = 200px
• Left + Right Padding = 40px
• Left + Right Border = 4px

तो उसकी total width होगी:

200px + 40px + 4px = 244px

यह calculation default box-sizing: content-box; के लिए है।

box-sizing: border-box

अगर आप चाहते हैं कि किसी element की दी गई width और height के अंदर ही padding और border भी शामिल हों, तो box-sizing: border-box; उपयोग किया जाता है।

Web development में अक्सर सभी elements के लिए यह rule इस्तेमाल किया जाता है:

CSS Box Model Diagram

Box Model को visually समझने के लिए आप इसे चार layers में समझ सकते हैं। सबसे अंदर Content, उसके बाहर Padding, फिर Border और सबसे बाहर Margin होता है।

Content Area: Element का actual content

Padding Area: Content और Border के बीच की अंदरूनी space

Border: Element की boundary

Margin Area: Element के बाहर की space

HTML और CSS के साथ Complete Box Model Example

अब एक complete example देखते हैं जिसमें HTML structure के साथ CSS में width, padding, border और margin सभी का उपयोग किया गया है। नीचे दिए गए editor में code को change करके आप उसका output उसी page पर देख सकते हैं।

CSS Box Model का Summary

Part	कहाँ होता है?	Purpose
Content	सबसे अंदर	Actual text, image या element content
Padding	Content के बाहर	Content और border के बीच space
Border	Padding के बाहर	Element की boundary
Margin	Border के बाहर	Element के बाहर spacing

CSS Box Model क्यों Important है?

CSS Box Model को समझना web designing में बहुत जरूरी है क्योंकि layout की spacing, element की actual size और elements के बीच distance इसी concept से closely related होते हैं। अगर padding, border और margin के difference को समझ लिया जाए, तो webpage का layout design करना और CSS की problems को debug करना काफी आसान हो जाता है।

• Elements की सही width और height समझने में मदद करता है।
• Content और border के बीच spacing control की जा सकती है।
• Elements के बीच proper gap बनाया जा सकता है।
• Responsive layouts बनाते समय size calculation समझने में मदद मिलती है।
• box-sizing: border-box; की मदद से predictable element sizes बनाई जा सकती हैं।

Conclusion

CSS Box Model में हर element को एक box की तरह समझा जाता है। इस box के अंदर Content होता है, उसके चारों तरफ Padding, फिर Border और सबसे बाहर Margin होता है। इन चारों parts को सही तरीके से समझना CSS layout और webpage designing के लिए बहुत important है।

जब आप width, height, padding, border और margin को एक साथ use करते हैं, तब box-sizing का behavior भी ध्यान में रखना चाहिए। इससे element की actual size को समझना और layout को properly control करना आसान हो जाता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---