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 padding, 1px को मोटाई भएको कालो border र 10px छ margin ।
यी मानहरू समायोजन गरेर, तपाईंले आफ्नो वेबपेजमा विभिन्न आकार र स्पेसिङका तत्वहरू सिर्जना गर्न सक्नुहुन्छ। को प्रयोग मार्फत Box Model, तपाइँसँग तपाइँको इन्टरफेस भित्र तत्वहरूको स्थिति, आकार, र स्पेसिङमा नियन्त्रण छ।