সিএসএস(৩) বক্স সাইজিং
একটি এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।
এক নজরে বক্স সাইজিং প্রোপার্টি
এলিমেন্টের মোট প্রস্থ এবং উচ্চতার সাথে প্যাডিং এবং বর্ডার যুক্ত করে।
সিএসএস(৩) বক্স সাইজিং প্রোপার্টি ব্যবহার না করলে কি ঘটে?
এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিম্নের ন্যায় গননা করেঃ
- প্রস্থ + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ প্রস্থ
- উচ্চতা + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ উচ্চতা
অর্থাৎ আপনি যদি box-sizing প্রোপার্টি না ব্যবহার করেন তাহলে একটি এলিমেন্টের সাথে ডিফল্টভাবে বর্ডার ও প্যাডিং যুক্ত হবে এবং আপনার কাংখিত প্রস্থ ও উচ্চতা থেকে ফলাফল ভিন্ন হবে।
নিম্নের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুটি <div> এলিমেন্ট দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
#first_div {
width: 290px;
height: 70px;
border: 2px dotted fuchsia;
}
#second_div {
width: 290px;
height: 70px;
padding: 15px;
border: 2px dotted blue;
}
</style>
</head>
<body>
<div id="first_div">এই ডিভটি ছোট দেখাচ্ছে, কারণ এর প্রশস্ততা 290px এবং উচ্চতা 70px।</div>
<br>
<div id="second_div">এই ডিভটি বড় দেখাচ্ছে, কারণ এর প্রশস্ততা 290px এবং উচ্চতা 70px এর সাথে যথাক্রমে 15px প্যাডিং যুক্ত হয়েছে।</div>
</body>
</html>
ফলাফল
তাই দীর্ঘ সময় ধরে ওয়েব-ডেভেলপারদেরকে প্রয়োজনের তুলনায় কম প্রস্থ এবং উচ্চতা নির্ধারণ করতে হত। কারণ তাদেরকে প্যাডিং এবং বর্ডারের মান বাদ দিয়ে হিসাব করতে হত। এই সমস্যার সমাধান হিসেবে সিএসএস(৩) box-sizing প্রোপার্টির উৎপত্তি হয়।
সিএসএস(৩) box-sizing প্রোপার্টি
একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতার মধ্যে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।
আপনি যদি একটি এলিমেন্টে box-sizing: border-box; সেট করেন তাহলে ঐ এলিমেন্টে সেটকৃত সাইজ(width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস box-sizing প্রোপার্টি</title>
</head>
<body>
<style>
#first_div {
width: 290px;
height: 70px;
border: 2px dotted fuchsia;
box-sizing: border-box;
}
#second_div {
width: 290px;
height: 70px;
padding: 15px;
border: 2px dotted blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="first_div">box-sizing: border-box;
ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে !!!</div>
<br>
<div id="second_div">box-sizing: border-box;
ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে!!!</div>
</body>
</html>
ফলাফল
box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়া অধিকাংশ ডেভেলপার তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটি ব্যবহার করে থাকে।
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
box-sizing |
১০.০ | ৮.০ | ২৯.০ | ৫.১ | ৯.৫ |