Blog

CSS Box Model Kya Hota Hai – What Is Box Model In CSS

CSS Box Model Kya Hota Hai?

CSS Box Model ek aisa concept hai jo har HTML element ko ek rectangular box ke roop mein define karta hai. Yeh box chaar main parts se bana hota hai: Content, Padding, Border, aur Margin. Is model ka use karke hum kisi bhi element ki width, height, aur spacing ko control kar sakte hain.

Agar aap kisi bhi webpage ke layout ko sahi tarike se samajhna aur design karna chahte hain, to CSS Box Model ka basic knowledge hona bahut zaroori hai. Chaliye har ek part ko detail mein samajhte hain.

1. Content :

Content wahi area hota hai jisme text, image ya koi bhi actual data display hota hai. Yeh box model ka andar ka sabse core part hota hai. Jab hum kisi bhi element ki width aur height set karte hain, toh default taur par woh sirf content area ko cover karti hai.

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

Is example mein div ka width 200px aur height 100px hai. Yeh sirf content area ke liye apply hoga, agar humne padding, border ya margin add nahi kiya hai.

Important Points:

  • Agar aap width aur height specify nahi karte, toh content apne aap adjust hota hai.
  • Agar content zyada hai aur specified width/height se bada hai, to scroll bar aa sakta hai ya content overflow ho sakta hai.

2. Padding :

Padding ek space hoti hai jo content aur border ke beech hoti hai. Yeh content ke andar hi hoti hai, aur iska use content ko border se dur rakhne ke liye kiya jata hai.

div {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: lightgreen;
}

Is case mein, content ke chaaro taraf 20px ka space add ho jayega, jo content ko border se thoda door kar dega.

Important Points :

  • Padding content aur border ke beech ka space hoti hai.
  • Iska size badhne se element ka overall size bhi badhta hai (agar box-sizing: border-box; use na kiya ho).

 Padding ke alag-alag values diye ja sakte hain:

padding-top (upar ki taraf)
padding-right (right side)
padding-bottom (neeche ki taraf)
padding-left (left side)

Yeh different sides pe alag-alag padding set karega.

3. Border :

Border ek line hoti hai jo content aur padding ke bahar hoti hai. Yeh kisi bhi HTML element ka outer boundary define karti hai.

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
}

Yeh example 5px thick black color ki solid border set karega.

Border ke Different Types:

Solid: Ek continuous line hoti hai.
Dashed: Dotted ya dashed line hoti hai.
Dotted: Sirf dots ki tarah hoti hai.
Double: Do lines ka ek border hota hai.

4. Margin :

Margin ek space hoti hai jo kisi bhi element ke border aur doosre elements ke beech ka gap define karti hai. Yeh ek element ko doosre elements se door rakhne ke liye use hoti hai.

div {
    width: 200px;
    height: 100px;
    border: 3px solid black;
    margin: 20px;
}

Yeh example element ke chaaro taraf 20px ka space add karega.

Important Points:

  • Margin ek element aur doosre elements ke beech ka gap badhane ke liye hota hai.
  • margin: auto; center alignment ke liye use hota hai
  • Individual margins diye ja sakte hain:

margin-top (upar ki margin)
margin-right (right side margin)
margin-bottom (neeche ki margin)
margin-left (left side margin)

Yeh alag-alag directions me margin set karega.

5. Box Sizing :

Box-sizing property decide karti hai ki width aur height ka calculation kaise kiya jayega. Yeh do types ki hoti hai:

1. Content-box (Default Behavior) : Default taur par, jab aap width aur height specify karte hain, to woh sirf content ke liye apply hoti hai, padding aur border ko nahi include karti.

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: content-box;
}

Is case me total width = 200px + 10px (left padding) + 10px (right padding) + 5px (left border) + 5px (right border) = 230px

2. Border-box (Recommended for Layouts) : Agar aap box-sizing: border-box; set karte hain, to width aur height me padding aur border bhi include ho jati hai.

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
}

Is case me total width = 200px hi rahegi, kyunki padding aur border already uske andar include ho chuki hai.

Why Use border-box?

  • Yeh layouts ko maintain karne me madad karta hai.
  • Width aur height me padding aur border ka impact nahi padta.
  • Responsive design me border-box zyada useful hota hai.

CSS Box Model ek bahut important concept hai jo kisi bhi webpage ke layout aur styling ke liye zaroori hota hai. Yeh Content, Padding, Border, aur Margin ka combination hota hai jo kisi bhi element ka size aur positioning define karta hai. box-sizing ka use karke hum apne layouts ko aur behtar control kar sakte hain.

Agar aapko CSS aur web design me expertise hasil karni hai, to Box Model ko acche se samajhna bahut zaroori hai.

Quiz: Test Your Knowledge on CSS Box Model

Bonus: Practical Application!

Aaj hi apne webpage par CSS Box Model ka istemal karke dekhein!

CSS Box Model ke concepts ko samajhne ke liye properties jaise margin, border, padding, aur content ka sahi tareeke se upayog karein aur apne webpage ka layout behtar banayein.

Leave a Reply