CSS (Cascading Style Sheets) mein Box Model ek bahut important concept hai. Webpage ke har ek HTML element ko browser ek rectangular box ki tarah treat karta hai. Yahi box ke andar ham content, padding, border aur margin ke saath kaam karte hai. In four cheezon ko hi milake CSS Box Model banta hai.
Let's understand in simple term's:
Har HTML element ek box ki tarah hota hai, jiske andar content hota hai, uske aas-paas padding hoti hai (inner side), uske upar border hota hai, aur sabse bahar margin hota hai (outer side).
1. Content
- Ye element ka actual data hota hai, jaise text, image ya koi aur content.
- Agar aap
widthaurheightset karte ho, toh wo content box ke liye set hoti hai (by default).
Example:
p {
width: 200px;
height: 100px;
}
Yaha p element ka content area 200px wide aur 100px tall hoga.
2. Padding
- Padding ka use content aur border ke beech mein space dene ke liye hota hai.
- Ye element ke background color ko follow karta hai.
Example:
p {
padding: 20px;
}
Iska matlab content ke 4 taraf 20px ka space add ho jayega.
3. Border
- Border padding ke bahar hota hai aur element ko outline karta hai.
- Border mein three property ko set kar sakte hai, color, width aur style.
Example:
p{
border: 2px solid red;
}
Iska matlab element ke 4 taraf 2px ki red line hogi.
4. Margin
- Margin element ke border ke bahar hota hai.
- Ye doosre elements ke beech distance banane ke liye use hota hai.
- Margin transparent hota hai (koi color nahi hota).
Example:
p {
margin: 30px;
}
Iska matlab element ke 4 taraf 30px ka gap hoga.
Visual Representation of Box Model
Box-sizing Property
Default behaviour mein, jab aap width aur height set karte ho, wo sirf content area ke liye hoti hai. Matlab padding aur border uske upar add ho jaate hain.
Isko change karne ke liye box-sizing property use hoti hai.
1. content-box (Default)
- Width aur height sirf content ke liye hoti hai.
- Padding aur border uske baad add hote hain.
2. border-box
- Width aur height mein content + padding + border sab include hote hain.
- Layout control karna easy ho jaata hai.
Example:
p {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
Yaha element ki total width 200px hi rahegi (content shrink hoga padding aur border ko samajhne ke liye).
Example with All Properties
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div>This is My CSS Box Model Example!</div>
</body>
</html>
Summary (Easy Recall)
- Content → Actual data (text, image).
- Padding → Content aur border ke beech space.
- Border → Padding ke bahar ki line.
Margin → Sabse bahar gap jo elements ko alag rakhta hai.
Comments