CSS बॉक्स मॉडल एक कंटेनर है जिसमें कई Properties होती हैं जिनमें बॉर्डर, मार्जिन, पैडिंग और सामग्री स्वयं शामिल होती हैं. इसका उपयोग वेब पेजों के डिजाइन और लेआउट को बनाने के लिए किया जाता है. इसका उपयोग विभिन्न Elements के लेआउट को अनुकूलित करने के लिए एक टूलकिट के रूप में किया जा सकता है. वेब ब्राउज़र CSS बॉक्स मॉडल के अनुसार प्रत्येक तत्व को Rectangular बॉक्स के रूप में Present करता है.
इन Properties की अलग अलग Values Define करके आप Element के Layout को Control कर सकते है. CSS Box Model का उपयोग Element की Width और Height को Control करने के लिए किया जाता है.
Margin − इस क्षेत्र में Border और Margin के बीच जगह होती है. मार्जिन क्षेत्र के Dimension margin-box की Width और Margin Box की Height होती हैं. Padding की ही तरह Margin का भी कोई Color नहीं होता है. यह Transparent होता है. Margin Define करने के लिए CSS मे Margin Properties Available होती है.
Border − Content और Padding के चारो तरफ Element की Border होती है. जब तक की आप Border Define नही करते है Border Hidden रहती है. Border Define करने के लिए CSS मे Border Properties Available होती है.
Padding − Content के चारो तरफ कितना Space रहेगा यह Padding द्वारा Define किया जाता है. Padding Define करने के लिए CSS मे Padding Properties Available होती है. आप अपने हिसाब से सभी Sides के लिए Padding एक साथ उपयोग कर सकते है.
Contents − इसमें Text, Image या अन्य मीडिया सामग्री जैसी सामग्री शामिल होती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Box Model Example</title>
<style>
div {
background-color: lightgrey;
width: 400px;
border: 25px solid red;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<div>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book..</div>
</body>
</html>