সুন্দর সিএসএস: Box-sizing

আসসালামু আলাইকুম, সুন্দর সিএসএস এ আপনাদের সবাইকে স্বাগতম।

আমরা সিএসএস করতে গিয়ে box-sizingproperty ব্যবহার করেছি। কিন্তু আমরা কি সবাই জানি এটা ঠিক কিভাবে কাজ করে? এ লেখায় আমি চেষ্টা করবো সেটা সহজে-সুন্দরে বুঝাতে।

box-sizing property’ র দুটি প্রধান Value বা মান রয়েছে।

1. border-box
2. content-box

box-sizing property হলো এমন একটি property যার কাজ হলো Width, Height and Content কে এমনভাবে হিসাব করা যেখানে padding and border হিসেব করা হবে কি হবে না সেটা নির্ধারন করে।

গোলমেলে লাগছে!!!! ভয় পাওয়ার কিছুই নাই। সামনে উদাহরন দেখলেই সহজ হবে বিষয়টা। (ইনশাআল্লাহ)

1. border-box

নিচের html কোডটি লক্ষ্য করুন। এরপর নিচের CSS কোডটি দেখুন। এরপর Result এ ক্লিক করে রেজাল্ট দেখুন।

HTML:
<div class="div1">This div is a smaller div </div>
<br>
<div class="div2">This div is a bigger div </div>
CSS:
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}
.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}

RESULT:

result

লক্ষ্য করে দেখুন যে দুটো div এর css এ width, height, border একই দেয়া হয়েছে। শুধুমাত্র padding এর তফাৎ। দ্বিতীয় div এর padding (50px) বড় থাকার কারনে এই বড় box এর সৃষ্টি হয়েছে।

কিন্তু দুটি div এর width, height একি হবার কারনে আমরা চাচ্ছি div ‍দুটো একই পরিমান জায়গা দখল করুক। কিন্তু 50px padding থাকার কারনে ২য় div টি বেশি জায়গা জুড়ে রয়েছে। ২য় div এর ক্ষেত্রে:

width = width + padding + border = 300 + 50 + 1= 351px

height = height + padding + border = 100 + 50 + 1= 151px

অথাৎ ২য় div টির width ও height হয়েছে যথাক্রমে 351px ও 151px

এখন এ সমস্যা সমাধানের জন্যই আমরা box-sizing property ব্যবহার করবো।

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

উপরের উদাহরনটিতে দেখুন কিভাবে box-sizing: border-box ব্যবহার করার কারনে আমাদের div দুটোই এখন একই জায়গা দখল করেছে।

কাজটা করলো কিভাবে?

এখানে “border-box” value টি ২য় div এর padding ও border কে ক্যালকুলেট করে 300px এর মধ্যে নিয়ে আসে।

মানে হইলো border-box এর কাছে padding ও border এর বেল নাই।

padding ও border কে হিসেব করে content তার চারপাশের space কে কমিয়ে এমনভাবে সংকুচিত করে যাতে padding ও border কে ঠিক রেখেই সেটা 300px জায়গা দখল করতে পারে।

2. content-box

“content-box” টি box-sizing property’র Default value. অর্থাৎ যেকোনো element তার content অনুযায়ী জায়গা দখল করে যদি না তার চারপাশে padding ও border থাকে।

//HTML//
<div class="parent">
  <p>Parent Content</p>
  <div class="child">
    <p>Child Content</p>
  </div>
</div>
//CSS//
.parent{
  width: 50%;
  border: 10px solid orange;  
}
.child{
  width: 100%;
  background: lightblue;
  border: 10px solid blue;
  padding: 5px;
  box-sizing: content-box;
}

RESULT:

content-box

উপরের উদাহরন থেকে দেখা যাচ্ছে যে, padding ও border এর জন্য child div টি parent div এর বাহিরে চলে এসেছে যদিও তার width 100% দেয়া হয়েছে যাতে এটি তার parent div এর পুরোটা জুড়ে জায়গা নেয়। কিন্তু তার padding ও border এর জন্য width 100% এর বেশি হয়ে গিয়েছে।

3. Border-box

//CSS//
.parent{
  width: 50%;
  border: 10px solid orange;
  
}
.child{
  width: 100%;
  background: lightblue;
  border: 10px solid blue;
  padding: 5px;
  box-sizing: border-box;
}

RESULT:

border-box

এখন আমরা ২য় div এ box-sizing:border-box দেয়ার কারনে div টি তার parent div এর মাঝে চলে এসেছে।

অর্থাৎ ২য় div টি স্বাভাবিক অবস্থায় তার কন্টেন্ট অনুযায়ী জায়গা দখল করে । padding ও border এর জন্য এর width বৃদ্ধি পেলেও border-box এর কারনে এটি আবার তার parent div এর মাঝে চলে এসেছে।

আশা করি বুঝতে পেরেছেন। না বুজলে গুগল ইউটিউবে কিছু টিউরোরিয়াল দেখে নিবেন, দেখবেন বুজতে সহজ লাগবে।