🧱 CSS Box Model

CSS Box Model यह समझाता है कि webpage पर हर HTML element को एक rectangular box के रूप में माना जाता है।

हर element के चारों तरफ अलग-अलग layers होती हैं। ये layers मिलकर element की total size और उसके आसपास की spacing को determine करती हैं।

CSS Box Model के मुख्य 4 parts होते हैं:

1. Content
2. Padding
3. Border
4. Margin

🔹 Parts of CSS Box Model

Box Model को बाहर से अंदर की तरफ इस तरह समझ सकते हैं:

Margin → Border → Padding → Content

1. Content

Content element के अंदर का actual data होता है।

जैसे:

• Text
• Image
• Video
• Button का text
• आदि

अगर हम किसी element को width: 200px और height: 100px देते हैं, तो सामान्य CSS Box Model में ये values content area की width और height को represent करती हैं।

2. Padding

Padding content और border के बीच की internal space होती है।

यह element के अंदर space बनाती है।

div {
  padding: 10px;
}

इसका मतलब content के चारों तरफ 10px padding होगी।

याद रखें:

Padding = Content के अंदर की space

3. Border

Border padding और margin के बीच होता है।

यह element के चारों तरफ एक boundary/किनारा बनाता है।

div {
  border: 5px solid black;
}

इसमें:

• 5px → Border width
• solid → Border style
• black → Border color

याद रखें:

Border = Element की boundary

4. Margin

Margin element के border के बाहर की external space होती है।

यह element और दूसरे elements के बीच distance बनाने के लिए उपयोग की जाती है।

div {
  margin: 20px;
}

इससे element के चारों तरफ 20px margin मिलेगी।

याद रखें:

Margin = Element के बाहर की space

🔹 Box Model का Basic Structure

इसे आसान तरीके से ऐसे समझ सकते हैं:

┌───────────────────────────────┐
│            Margin             │
│   ┌───────────────────────┐   │
│   │        Border         │   │
│   │  ┌─────────────────┐  │   │
│   │  │     Padding     │  │   │
│   │  │  ┌───────────┐  │  │   │
│   │  │  │  Content  │  │  │   │
│   │  │  └───────────┘  │  │   │
│   │  └─────────────────┘  │   │
│   └───────────────────────┘   │
└───────────────────────────────┘

Inside → Outside:

Content → Padding → Border → Margin

यह order याद रखना बहुत important है।

🔹 Total Element Width & Height Formula

जब हम किसी element की actual total size calculate करते हैं, तो केवल width और height को नहीं देखते।

Normal CSS Box Model में width और height के साथ padding, border और margin भी total size को प्रभावित करते हैं।

Total Width:

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

Total Height:

Total Height =
height
+ top padding
+ bottom padding
+ top border
+ bottom border
+ top margin
+ bottom margin

🔹 Example

मान लीजिए हमारे पास यह CSS है:

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

अब एक-एक value को समझते हैं:

• Width = 200px
• Height = 100px
• Padding = 10px चारों sides पर
• Border = 5px चारों sides पर
• Margin = 20px चारों sides पर

🧮 Total Width Calculation

Left और right दोनों sides को include करना होगा:

Total Width
= 200 + 10 + 10 + 5 + 5 + 20 + 20
= 270px

इसलिए Total Width = 270px

🧮 Total Height Calculation

Top और bottom दोनों sides को include करना होगा:

Total Height
= 100 + 10 + 10 + 5 + 5 + 20 + 20
= 170px

इसलिए Total Height = 170px

🔑 Important Point

यहाँ width: 200px का मतलब यह नहीं है कि element की पूरी outer width 200px होगी।

Default content-box sizing में:

Content Width = 200px

इसके बाद padding, border और margin add होने पर total occupied space:

Total Width = 270px

इसी तरह:

Content Height = 100px
Total Height = 170px