CSS Box Model Kya Hota Hai?

Box Model ka Introduction

CSS me, har HTML element ek rectangular box hota hai. CSS Box Model ek fundamental concept hai jo batata hai ki yeh box kaise aakar leta hai. Yeh model chaar hisson se milkar banta hai, jo bahar se andar ki taraf hain: Margin, Border, Padding, aur Content.

In chaaron hisson ko samajhna web page ke layout aur spacing ko control karne ke liye bohot zaroori hai.

Box Model ke Components

1. Content

Yeh box ka sabse andar ka hissa hai, jahan aapka actual content—jaise text, images, ya videos—dikhai deta hai. Iski dimensions width aur height properties se control hoti hain.

2. Padding

Padding content area aur border ke beech ka transparent space hota hai. Iska use content ko border se ek safe distance par rakhne ke liye hota hai, jisse readability behtar hoti hai.

div { padding: 20px; }

3. Border

Border padding ke bahar ek line hoti hai. Aap iska style, width, aur color define kar sakte hain.

div { border: 2px solid black; }

4. Margin

Margin box ka sabse bahari hissa hai. Yeh border ke bahar ka space hota hai aur ek element ko doosre elements se alag karne ke liye use hota hai.

div { margin: 15px; }

The box-sizing Property

Yeh property decide karti hai ki element ki total width aur height kaise calculate hogi. Iski do main values hain:

content-box (Default)

By default, width aur height properties sirf content area par apply hoti hain. Padding aur border is width/height me alag se add hote hain.

Total Width = width + left padding + right padding + left border + right border.

border-box (Recommended)

Jab aap box-sizing: border-box; set karte hain, toh width aur height properties me padding aur border bhi shamil ho jaate hain. Isse layout banana bohot aasan ho jaata hai kyunki element ka size predictable rehta hai.

Total Width = width (isme padding aur border already included hain).

/* Best practice for predictable layouts */
* {
  box-sizing: border-box;
}

Key Takeaways

• Har HTML element ek box hai jiske 4 hisse hote hain: Content, Padding, Border, Margin.
• Padding content aur border ke beech ka space hai.
• Margin ek element ko doosre elements se door rakhta hai.
• box-sizing: border-box; ka use karna layouts ko aasan aur predictable banata hai.