Chapter 9CSS Tutorial~2 min read
CSS Box Model
Content, Padding, Border, Margin — Layout चा आधार
CSS Box Model म्हणजे प्रत्येक HTML element एक rectangular box म्हणून render होतो. त्यात 4 layers असतात: Content, Padding, Border, Margin. हे CSS layout चा सगळ्यात fundamental concept आहे.
Box Model चे 4 Layers
- ▸Content: सगळ्यात आत — actual text, image, video. width आणि height properties ने size set होतो.
- ▸Padding: Content आणि Border मध्ये spacing. padding property ने control करतो.
- ▸Border: Content + Padding च्या बाहेर visible boundary. border property.
- ▸Margin: Element च्या बाहेर space — दुसऱ्या elements पासून दूर ठेवतो. margin property.
Marathi Analogy
📦 Analogy: Amazon parcel सारखे — आतमध्ये product (Content), product सभोवती bubble wrap (Padding), बाहेर box (Border), boxes मधील space (Margin).
Box Model — Complete Example
css
p {
/* Content */
width: 200px;
height: 300px;
/* Padding — content आणि border मध्ये */
padding: 15px; /* सगळ्या sides ला 15px */
/* Border */
border: 10px solid red;
/* Margin — element च्या बाहेर */
margin: 5px;
background-color: lightblue;
}
/* Total Width = 200 + 15+15 + 10+10 + 5+5 = 260px
Total Height = 300 + 15+15 + 10+10 + 5+5 = 360px */Total Size Calculate करणे
- ▸Total Width = Width + Left Padding + Right Padding + Left Border + Right Border + Left Margin + Right Margin
- ▸Total Height = Height + Top Padding + Bottom Padding + Top Border + Bottom Border + Top Margin + Bottom Margin
Padding आणि Margin Shorthand
Padding / Margin Shorthand
css
/* 1 value — सगळ्या sides ला */
padding: 20px;
/* 2 values — top+bottom | left+right */
padding: 10px 20px;
/* 4 values — top | right | bottom | left (Clock wise) */
padding: 10px 20px 15px 5px;
/* Individual sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
/* Margin auto — horizontal centering साठी */
div {
width: 800px;
margin: 0 auto; /* Left + Right auto = center */
}💡
Browser DevTools मध्ये (Right-click → Inspect) element select केल्यावर खाली Box Model diagram दिसतो — actual padding, border, margin values सगळे visually दिसतात.
✅ Key Points — लक्षात ठेवा
- ▸Box Model = Content + Padding + Border + Margin
- ▸Total Width = width + padding + border + margin (दोन्ही sides)
- ▸padding: 10px 20px = top-bottom | left-right
- ▸padding: 10px 20px 15px 5px = top | right | bottom | left
- ▸margin: 0 auto = horizontal center करणे
0/16 chapters पूर्ण