CSS Box Model in Hindi
Box Model in CSS एक वेब पेज की layout और design के बारे में बताता है | एक वेबपेज में जितने भी element होतें हैं सबको एक box की तरह माना जाता है |
CSS Box Model एक जरुरी concept है css में | इससे सही से जानने से ही सारे elements को वेबपेज में सजा सकतें हैं और इसकी layout को मैनेज कर सकतें हैं | इसलिए एक Web Designer को box model की पूरी जानकारी लेनी चाहिए |
CSS Box Model Property
एक CSS Box Model में 4 मुख्य property होतें हैं:
- Content
- Padding
- Border
- Margin
1) Content
Content Property दर्शाता है element के content को | content या तो text या कोई image या फिर कोई media हो सकता है और ये box के center में रहता है |
2) Padding
Content के चारो तरफ की खाली जगह को padding केहते हैं | और इस property को 2 तरीके से दर्शाया जाता है | पहली padding shorthand से और दूसरी top, bottom, left और right padding के जरिये |
- Top Padding- content की ऊपर की खाली जगह को दर्शाता है |
- Bottom Padding- content की निचे की खाली जगह को दर्शाता है |
- Left Padding- content की left side या बांयी तरफ की खाली जगह को दर्शाता है |
- Right Padding- content की right side या दांयी तरफ की खाली जगह को दर्शाता है |
- Padding Shorthand- इससे चारो padding के वैल्यू को एक लाइन में लिख सकते हैं |
Padding Syntax
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;Padding Shorthand Syntax :
padding: top, right, bottom, left;
Example: padding: 5px, 10px, 5px, 10px;*नॉटपॉइंट
अगर padding की top, bottom, left, right की value सब बराबर है तो, अलग लिखने की वजाए एक बार में लिखी जा सकती है |
उदाहरण : जैसे एक element की top, left, bottom, right padding 5px देनी है, तो सिर्फ एक बार ही 5px लिख सकते हैं |
देखें ऐसे -> padding: 5px;
3) Border
Content के चारो तरफ की border को box model की border property कहा जाता है | element की border ऐसे तो By-Default दिखाई नहीं देती | अगर element में border लगाना है तो उसे सेट करना पड़ता है | border लगाने के 3 properties लिखी जाती वो है border-width, border-style, border-color |
border property syntax
border : border-width border-style border-color
उदाहरण
border : 3px solid blue;
4) Margin
Margin property border के चारो तरफ की खाली जगह को दर्शाता है | element और browser की बिच की जगह को मार्जिन कहा जाता है | और इस property को 2 तरीके से दर्शाया जा सकता है | पहली margin shorthand से और दूसरी top, bottom, left और right margin के जरिये |
- Top Margin – border की ऊपर की खाली जगह को दर्शाता है |
- Bottom Margin – border की निचे की खाली जगह को दर्शाता है |
- Left Margin – border की left side या बांयी तरफ की खाली जगह को दर्शाता है |
- Right Margin – border की right side या दांयी तरफ की खाली जगह को दर्शाता है |
- Margin Shorthand- इससे चारो margin के वैल्यू को एक लाइन में लिख सकते हैं |
Margin Syntax Example
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;margin Shorthand Syntax :
margin: top, right, bottom, left;
Example: margin: 5px, 10px, 5px, 10px;*नॉटपॉइंट
अगर margin की top, bottom, left, right की value सब बराबर है तो अलग लिखने की वजाए एक बार में लिखी जा सकती है |
उदाहरण : जैसे एक element की top, left, bottom, right margin 50px देनी है, तो सिर्फ एक बार ही 50px लिख सकते हैं
देखें ऐसे -> margin: 50px;
Box Model की साइज़ को कैसे मापा जाता है ?
कोई भी element की साइज़ उसकी weight और height के जरिये जानी जाती है | जैसे की हमने पढ़ा की हर element एक box को दर्शाता है | तो चलिए element की पूरी weight और height को हिसाब करना सीखें |
Calculate box size:
Element total width : content width + left padding + right padding + left border + right border + left margin + right margin
Element total height : content height + top padding + bottom padding + top border + bottom border+ top margin + bottom margin
उदाहरण:
<html>
<head>
<style>
img{
width: 200px;
padding : 10px;
border : 3px solid red;
margin: 50px;
}
</style>
</head>
<body>
<img src="lily.jpg" />
</body>
</html>
ऊपर के उदाहरण में image की width 200px दी गयी है | और total width होगी : width + left padding + right padding + left border + right margin + left margin
total image width = 200 + 10 + 10 + 3+ 3+ 50 + 50 = 316px /*image element की पूरी box size हुयी 316px*/
output:
