CSS Box Model kya hai?

CSS Box Model ek conceptual model hai jisme har HTML element ek rectangular box ke roop me treat hota hai. Har box ke andar Content, Padding, Border, aur Margin hota hai.

Box Model ke Components

Content: Element ka asli content, jaise text, image, etc.
Padding: Content ke ird-gird ka wo space jo content ko border se door rakhta hai.
Border: Padding ke bahar wali line ya boundary jo box ko define karti hai.
Margin: Border ke bahar ka transparent space jo doosre elements se gap banata hai.

Example Box Model Code

Yahaan ek example hai jo isi concept ko dikhata hai:

Ye box content hai, jiske upar padding, border, aur margin applied hain.

Box-sizing Property

Default me box-sizing: content-box; hota hai, matlab width aur height sirf content ke liye hoti hai. Agar aap box-sizing: border-box; use karte hain, to padding aur border width ke andar include ho jata hai.

Is box me box-sizing border-box hai, toh pura box 300px wide hai, including padding aur border.

Total Width aur Height Calculation

Total width ya height calculate karne ke liye aapko content, padding, border, aur margin sabko jodna hota hai.


Total Width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Total Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Summary

CSS Box Model samajhna bahut zaruri hai, kyunki ye aapko elements ko sahi se layout aur design karne me madad karta hai. Iske bina elements ki sizing samajhna mushkil hota hai.