X

X

X

CSS3 বক্স সাইজিং


CSS3 বক্স সাইজিং

কোনো ইলামেন্টের পুরো এরিয়ার চারপাশে বর্ডার ও প্যাডিং যুক্ত করার জন্য box-sizing property ব্যবহার করা হয়।


ব্রাউজার সাপোর্ট

Property
box-sizing 10.0
4.0 -webkit-
8.0 29.0
2.0 -moz-
5.1
3.1 -webkit-
9.5

CSS3 box-sizing Property ছাড়া

বক্স সাইজিং প্রপার্টি ব্যবহার ছাড়া কোনো ইলামেন্টের উচ্চতা ও প্রস্থ নিম্নোক্তভাবে গণনা করা হয়:

width + padding + border = actual width
height + padding + border = actual height

অর্থাৎ, যখন কোনো ইলামেন্টের এই অবস্থায়, প্রস্থ বা উচ্চতা সেট করা হয়, তখন এর মান কাঙ্খিত মানের চেয়ে বেশি হয়ে যায়।

নিচের দুইট <div> element দেখানো হলো যাদের তত্ত্বীয়ভাবে একই উচ্চতা ও প্রস্থ সেট করা হয়েছে:

This div is smaller (width is 300px and height is 100px).
This div is bigger (width is also 300px and height is 100px).

দুইটি ইলামেন্টের আকার পৃথক দেখাচ্ছে কারণ একটির প্যাডিং কম ও আরেকটির বেশি নির্ধারণ করা হয়েছে।

Code Example

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

কাজেই সিএসএস৩ আসার আগে ডেভেলপারর মূল সাইজের চেয়ে কম সাইজ নির্ধারণ করতো কোনো ইলামেন্টের জন্য, যাতে লেআউট ঠিক থাকে।

CSS3 এ box-sizing property ব্যবহার করে এই সমস্যার সমাধান করা হয়েছে।


CSS3 box-sizing Property সহ

CSS3 box-sizing property ব্যবহার করে কোনো ইলামেন্টের প্যাডিং ও বর্ডারকে উচ্চতা ও প্রস্থের মধ্যে অন্তর্ভুক্ত করা যায়।

যদি আগের দুটি ইলামেন্টে box-sizing: border-box; সেট করেন তবে তাদের আউটপুট নিচের মত হবে:

Both divs are the same size now!
Hooray!

পুরো কোডটি নিচে উপস্থাপণ করা হলো:

Code Example

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যেহেতু box-sizing: border-box; এর ব্যবহার খুবই উপকারী, কাজেই অনেক ডেভেলপার সব ইলামেন্টের জন্য এই প্রপার্টি ব্যবহার করতে চান।

সব ইলামেন্টের জন্য এই প্রপার্টি ব্যবহার নিরাপদ এবং খুব কাজের:

Code Example

* {
    box-sizing: border-box;
} 

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।