सीएसएस में, यह 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
सीएसएस का उपयोग करके 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, आप अपने इंटरफ़ेस के भीतर तत्वों की स्थिति, आकार और अंतर पर नियंत्रण रखते हैं।