CSS Box Model और उनके Properties Hindi में

आज हम CSS Box Model के बारे में जानेंगे की आखिर यह है क्या, इसका उपयोग क्या है, यह HTML और CSS के साथ काम कैसे करता है. इसके अलावा कुछ नए CSS properties भी देखेंगे और उसका use करेंगे।

इससे पहले हमने HTML से website layout design करना  सीखा, CSS से webpage बनाया लेकिन आज हम कुछ थोड़ी सी गहराई में जा कर जानने की कोशिश करेंगे की आखिर किसी वेबपेज में कोई element display कैसे होता है।

आज हम नीचे दिए कुछ points पर focus करेंगे:

• CSS में elements display कैसे होते हैं?
• Display Properties क्या हैं?
• CSS Box Model क्या है? यह important क्यों हैं?
• Box model properties

CSS में elements display कैसे होते हैं?

Box model को समझने से पहले हमे यह जानना जरूरी है की हम जो element अपने पेज पर डालते हैं वह आखिर display कैसे होता है। यहाँ पर element का मतलब वो सारे contents है जो की हम अपने वेबपेज पर डालते हैं जैसे की कोई paragraph, image, list आदि।

कोई भी element page पर मुखतः दो तरीके से display होते  हैं:

1. Block level: इसमें element एक नये लाइन से शुरू होता है और उस लाइन पर जितने space available होते हैं उसे पूरा occupy कर लेता है| इसे किसी बड़े कंटेंट जैसे heading, images, divisions आदि के लिए ज्यादातर उपयोग किया जाता है।
2. Inline level: इसमें element की size जितनी होती है वह उतना ही space लेता है| छोटे content के लिए और जब हमें एक लाइन में एक से ज्यादा content दिखानी हो तब इसका use किया जा सकता है।

Display property क्या है?

इस property से हम browser को यह बताते हैं की कोई element कैसे display हो - block, inline या फिर किसी और तरीके से। सभी elements में by default कुछ न कुछ display property के value होते हैं जिसे हम चाहें तो अपने आवश्यकता अनुसार बदल भी सकते हैं।

वैसे तो इस प्रॉपर्टी के कई values होते हैं जिनमे से ज्यादातर block, inline, inline-block और none का उपयोग होता है।

Block level पर दिखाने के लिए display की value block डाल सकते हैं

p {
display: block;
}

Inline value से selected element inline-level element बन जाता है

p{
  display: inline;
}

inline-block बनाने के लिए इस कोड का प्रयोग करें:

p{
display: inline-block;
}

किसी भी element को hide करने के लिए इस प्रॉपर्टी की value none कर सकते हैं|

p{
  display: none;
}

Difference between block, inline and inline-block 

आप अगर inline और block का प्रयोग करके देखें तो आपको आसानी से इनके बीच के अंतर का पता चल जायेगा लेकिन आप inline और inline-block में थोडा confuse हो सकते हैं।

तो चलिए इन सभी के बीच क्या अंतर है ये है यह समझने के लिए एक आसान सा उदाहरण देखते है।

आप ऊपर चित्र के जरिये अंतर को समझने की कोशिश करें, और नीचे दिए कुछ points पर ध्यान दें:

Block elements:

• width और height set किया जा सकता है 
• block element के बाद एक line break आ जाता है जिससे की इसके बाद वाला content नये लाइन से शुरू होता है

Inline elements:

• width और height set नही किया जा सकता
• इसके पहले और बाद वाले contents इसके अगल-बगल में दिखाई देंगे

inline-block elements:

• इस प्रकार के element में हम height-width set कर सकते हैं
• इसके right और left में दुसरे contents show हो सकते हैं

CSS Box Model क्या है ? यह important क्यों हैं?

CSS box model concept के अनुसार किसी page में सारे elements एक rectangular box की तरह होते हैं।
हमारा CSS वेब पेज में जितने भी elements होते हैं चाहे वह text, image, paragraph,  list, heading हो, या कोई भी html tag हो सभी को अलग-अलग डिब्बे की तरह देखता है और वैसे ही डिस्प्ले करता है और इन boxes के height, width, border, margin, padding जैसे properties होते हैं।

आप ऊपर दिए चित्र से समझ सकते हैं की किसी पेज के सभी elements कैसे एक बॉक्स की तरह काम करते हैं, हमने इस पेज के सभी elements पर border apply कर दिया है।

हमारे पेज के सारे contents इस concept को follow करते हैं इस लिए web designing में css box model बहुत ही important होते हैं इसलिए इसे समझना बहुत ही जरूरी है।

Box model properties

Box model के अन्दर 5 properties होते हैं जो की इस प्रकार हैं:

1. Width
2. Height
3. Padding
4. Margin
5. Border

आप नीचे चित्र के माध्यम से इन properties को समझ सकते हैं|

अब चलिए कुछ सवालों के जवाब जानने की कोशीश करते हैं:

CSS में margin क्या है?

• चारों तरफ से content की दूरी define करता है
• contents के बीच की दूरी सेट की जा सकती है
• यह पूरी तरह से transparent होता है इसमें को भी color नही होता है
• किसी कंटेंट को निश्चित स्थान पर दिखाने के लिए उपयोग होता है

CSS में padding क्या है?

• Content और border के बीच के distance को padding कहते हैं
• यदि हमने कोई box बनाया है जिसके अंदर text है तो उस text और box के border के बीच की दूरी कितनी होगी यह हम padding से define करते हैं

CSS में border क्या है?

• यह padding और margin के बीच की line होती है
• हम चाहें तो कंटेंट के चारों तरफ या किसी भी side border लगा सकते हैं

बॉक्स मॉडल के अनुसार total width और height निचे दिए formula से निकाल सकते हैं:

total width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

total height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Height और Width Property

हम किसी भी कंटेंट की लम्बाई और चौड़ाई को बदल सकते हैं जिसके लिए हमें height और width property use करना पड़ता है। इनकी value आप percentage(%) में भी दे सकते हैं इससे उस content की size available space के बराबर होगी।

इसका एक example आप नीचे देख सकते हैं:

div{height:200px; width:200px;}

Padding Property

padding set करने के लिए इस प्रॉपर्टी का syntax और examples आप निचे देख सकते हैं:

अगर हम top, left, right, bottom की अलग-अलग padding set करना चाहते हैं तो उसके लिए निचे दिए syntax का उपयोग करें:

selector{ padding-top: value; }

selector{ padding-right: value; }

selector{ padding-bottom: value; }

selector{ padding-left: value; }

इसका shorthand property भी है जिसमे हम एक बार में ही चारों values को specify कर सकते हैं इसका syntax कुछ इस प्रकार होगा:

padding: top right bottom left;

example:

padding: 10px 20px 15px 20px;

यदि left और right की value same हो तो हम 3 values डाल सकते हैं:

padding: 10px 20px 15px;

जहां top-padding 10px, right and left padding 20px, bottom-padding 15px होगी|

ऐसे ही हम दो वैल्यू भी दे सकते हैं:

padding: 10px 20px;

जहाँ top and bottom padding 10px और right and left padding 20px होगी|

अगर single value specify करते हैं तो इसका मतलब है की चारों तरफ की padding same होगी|

padding:10px;

Margin Property

इसका भी syntax padding जैसा ही होता है इसके भी चार वैल्यूज हो सकते हैं और इसके भी shorthand -property होते हैं।

हम element के चारों तरफ की margin अलग-अलग set कर सकते हैं इसके लिए syntax कुछ इस प्रकार होंगे:

selector{ margin-top: value; }

selector{ margin-right: value; }

selector{ margin-bottom: value; }

selector{ margin-left: value; }

या हम margin की shorthand property use कर सकते हैं:

margin: top right bottom left;

example:

margin:5px 10px 4px 30px;

हम इसकी value auto भी कर सकते हैं जिससे element horizontally center में आ जायेगा|

margin:auto;

Border Property

Border को control करने के लिए CSS में 4 properties दिए गये हैं जिसके बारे में नीचे दी जा रही है:

• border-style
• border-width
• border-color
• border-radius

इन सभी के बारे में आइये विस्तार से समझते हैं|

border-style: इससे हम border की style को बदल सकते हैं यह प्रॉपर्टी बताता है की हम किस प्रकार की बॉर्डर का उपयोग करना चाहते हैं|

syntax:

selector{border-style:value;}

इसके कई सारे values होते हैं जो की नीचे दिए जा रहे हैं:

• none : इस value से border show नही होती
• solid: solid border लगाने के लिए
• dashed: इस value से border dashed (-) दिखाई देती है
• dotted: dotted effect देने के लिए उपयोग होगा
• double: इससे selected element में double line वाली borer display होती है
• groove: इससे बॉर्डर को groove बनाया जाता है
• ridge: बॉर्डर को  3D ridge effect देने के लिए इसका उपयोग होता है
• inset: 3D inset boder लगाने के लिए उपयोग होता है
• outset: 3D outside border बनाने के लिए use होता है|

इन सबका उदाहरण आप नीचे देख सकते हैं:

p{border-style: none;}

No border

p{border-style: solid;}

A solid border

p{border-style: dashed;}

A dashed border

p{border-style: dotted;}

A dotted border

p{border-style: double;}

A double line border

p{border-style: groove;}

A 3D groove border

p{border-style: ridge;}

A 3D ridge border

p{border-style: inset;}

A 3D inset border

p{border-style: solid double dashed dotted;}

Mixed border

Border Width property:
Border width define करने के लिए इसका उपयोग होता है| हम border के width को change करने के लिए pre-defined keywords thin, medium, या thick का भी उपयोग कर सकते हैं|

p{border-style: solid;
border-width: 5px;}

border-width example

Border Color Property
border की कलर को बदलने के लिए इस प्रॉपर्टी का उपयोग किया जाता है| color हम तीन तरीके से specify कर सकते हैं:

• color name: जैसे blue
• color code (Hex value): जैसे #cccccc
• RGB value: जैसे rgb(250,20,20)

ध्यान रहे बिना border-style define करे border में color नही लगाया जा सकता|
इसको समझने के लिए इसका उदाहरण नीचे दिया जा रहा है|

p{
border-style: solid;

border-color: blue;

}

border color example

Border Shorthand Property: 
हम border-style,border-width,border-color की value एकसाथ एक ही लाइन में specify कर सकते हैं:

example:

p{border:1px solid #cccccc;}

border color example

Border Radius Property:
यह बहुत ही मजेदार प्रॉपर्टी है इसके जरिये हमे border को और भी attractive बना सकते हैं| इसका उपयोग बॉर्डर में radius define करने के लिए किया जाता है|
आइये इसका कुछ उदाहरण देखते हैं:

p {
border: 2px solid green;
border-radius: 10px;
}

border-radius example

सारांस:

तो आइये आज हमने क्या-क्या सीखा इस पर एक नजर डालते हैं:

• HTML page में elements कैसे display होते हैं|
• CSS Display properties क्या हैं इसको कैसे उपयोग करें 
• display block, inline, inline-block में difference क्या है 
• CSS Box model क्या है इसका क्या उपयोग है 
• element की height, width change करना 
• Margin, padding क्या है इसको कैसे use करें 
• किसी element में border कैसे add करें 
• border में color और radius कैसे लगायें 

अगर आपको  CSS box model से जुड़े कुछ सवाल पूछने हैं या कुछ कहना चाहते हैं  तो आप comment के माध्यम से हमे जरूर बताएं।