যখন আমরা CSS-এ একটি এলিমেন্টের প্রস্থ এবং উচ্চতা সেট করি, তখন প্রায়শো এলিমেন্টটি প্রকৃত আকারের চেয়ে বড় দেখায়। এটি হয় কারণ ডিফল্টভাবে প্যাডিং এবং বর্ডার এলিমেন্টের প্রস্থ এবং উচ্চতার সাথে যোগ হয়ে প্রদর্শিত হয়।
box-sizing প্রপার্টি এলিমেন্টের প্যাডিং এবং বর্ডারকে প্রকৃত প্রস্থ এবং উচ্চতার সাথে অন্তর্ভুক্ত করে যাতে এলিমেন্টটি প্রকৃত আকারের চেয়ে বড় না দেখায়। এই প্রপার্টি ব্যবহার করার ফরম্যাট: "box-sizing: border-box"
উদাহরণ
নিচের কোডটি চালিয়ে টেক্সট এবং সিলেক্ট বক্স একই প্রস্থে এলাইন করতে পারেন:
<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>
