आज इस आर्टिकल में हम आपको CSS Box Model Tutorial in Hindi – Part 9 के बारे में बता रहे है.

CSS box model में element की width, height, border, margin और padding सभी की element इन सभी को मिला कर जितना element की height और width बनती है, उसी को उस element का full बॉक्स कहा जाता है. इसकी फोटो हम आपको नीचे दिखा रहे है.




Example
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
अब मान लो हम इस एक element की पूरी width को चेक करना चाहते है तो कैसे करेंगे तो यह बहुत ही आसान है.
300 px width + 50px(25px right border + 25px left border) + 50px (25px right padding + 25px left padding) + 50px (25px right margin + 25px left margin) = 450px total width
इस प्रकार आप किसी भी element की width और height चेक कर सकते है और इसका फार्मूला हम आपको नीचे बता रहे है.
Calculate Total Width
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Calculate Total Height
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin