CSS मध्ये, Box Model एखाद्या घटकाची रचना आणि स्थान वेबपृष्ठावर कसे आहे हे निर्धारित करण्यासाठी ही एक महत्त्वाची संकल्पना आहे. यात मूलभूत घटक जसे की सामग्री, Padding, Border आणि Margin.
Content
Content मजकूर, प्रतिमा किंवा व्हिडिओ यासारख्या घटकाची वास्तविक सामग्री असलेले क्षेत्र आहे.
सामग्रीचा आकार परिभाषित करण्यासाठी, आम्ही width आणि height गुणधर्म वापरतो.
Padding
Padding सामग्री आणि घटक यांच्यामध्ये अंतर निर्माण करून सामग्रीभोवतीची जागा आहे border.
padding मूल्ये निर्दिष्ट करण्यासाठी, आम्ही padding-top, padding-right,padding-bottom आणि गुणधर्म वापरतो. padding-left
Border
ही Border घटकाभोवतीची बाह्यरेखा आहे, जी सामग्री आणि आसपासच्या क्षेत्रामध्ये स्पष्ट सीमा तयार करते.
फॉरमॅट करण्यासाठी border आम्ही border-width, border-style, आणि border-color गुणधर्म वापरतो.
Margin
Margin घटकाच्या बाहेरील जागा आहे border, इतर घटकांमध्ये अंतर निर्माण करते.
मूल्ये परिभाषित करण्यासाठी margin, आम्ही margin-top, margin-right, आणि गुणधर्म वापरतो. margin-bottom margin-left
इन CSS चा वापर करून Box Model, आम्ही घटकांच्या मूल्यांमध्ये बदल करून त्याचा आकार आणि स्थान सानुकूलित करू शकतो.
उदाहरण:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
वरील उदाहरणामध्ये, वर्ग असलेल्या घटकाची .box रुंदी 200px आणि उंची 100px आहे. यात 20px, 1px जाडी असलेला padding काळा आणि 10px आहे. border margin
ही मूल्ये समायोजित करून, तुम्ही तुमच्या वेबपृष्ठावर भिन्न आकार आणि अंतर असलेले घटक तयार करू शकता. च्या वापराद्वारे Box Model, तुमच्या इंटरफेसमधील घटकांची स्थिती, आकार आणि अंतर यावर तुमचे नियंत्रण असते.