जब हम CSS में किसी तत्व की चौड़ाई और ऊंचाई निर्धारित करते हैं तो अक्सर तत्व वास्तविक आकार से बड़ा दिखाई देता है। ऐसा इसलिए है क्योंकि डिफ़ॉल्ट रूप से, पैडिंग और बॉर्डर को तत्व की चौड़ाई और ऊंचाई में जोड़ा जाता है और फिर तत्व प्रदर्शित होता है।
बॉक्स साइजिंग प्रॉपर्टी में वास्तविक चौड़ाई और ऊंचाई वाले तत्व की पैडिंग और बॉर्डर शामिल होता है ताकि तत्व वास्तविक आकार से बड़ा न दिखे। इस संपत्ति का उपयोग करने का प्रारूप "बॉक्स-साइज़िंग:बॉक्स-बॉर्डर" है
उदाहरण
आप टेक्स्ट को संरेखित करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं और समान चौड़ाई के बॉक्स का चयन कर सकते हैं -
<html>
<head>
<style>
input, select {
width: 250px;
border: 2px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 3px;
}
</style>
</head>
<body>
<input type = "text" value = "Name of Candidate"><br>
<select>
<option>Select Choice</option>
<option>Student</option>
<option>Teachers</option>
<option>Head</option>
</select>
</body>
</html>