CSS box-sizing প্রপার্টি ব্যবহার করে ব্রাউজার কীভাবে আপনার HTML এলিমেন্টগুলোর প্রস্থ এবং উচ্চতা ক্যালকুলেট এবং রেন্ডার করে সেটি কন্ট্রোল করা শিখুন।
box-sizing (content-box vs border-box)
CSS box-sizing প্রপার্টির দুটি ভ্যালু আছে:
content-box(ডিফল্ট)border-box
উভয় box-sizing ভ্যালু HTML এলিমেন্টের আকার ক্যালকুলেট এবং রেন্ডার করার ওপর প্রভাব ফেলে, কিন্তু এটাই একমাত্র জিনিস যা তাদের কмон।
content-box
ডিফল্টভাবে সব HTML এলিমেন্ট content-box ভ্যালু ব্যবহার করে:
box-sizing: content-box;এর মানে যদি আপনার একটি এলিমেন্ট থাকে নিচের স্টাইলসহ:
div { width: 100px; height: 100px; padding: 16px; border: 1px solid; }তাহলে সেই এলিমেন্টের প্রস্থ এবং উচ্চতা ক্যালকুলেট হবে 134px, নয় 100px যেন আপনি আপনার CSS স্টাইলশীটে স্পেসিফাই করেছেন। ফলাফল:
আপনি যদি নিজে চেক করতে চান, আপনার ব্রাউজারের Element Inspector এই কমান্ড দিয়ে ইনাবল করুন:
- Mac: Cmd + Shift + C
- Windows: Ctrl + Shift + C
তারপর এলিমেন্টের ওপর মাউস মুভ করুন এর সাইজ দেখতে।
এটি হয় কারণ content-box প্রস্থ/উচ্চতা ভ্যালুগুলোর সাথে বর্ডার (1px প্রতিটি সাইড) এবং প্যাডিং (16px প্রতিটি সাইড) ভ্যালুগুলো যোগ করে এবং এলিমেন্টের সাইজ রেন্ডার করে সেই ভ্যালুগুলোর সমষ্টিতে:
- এলিমেন্ট প্রস্থ:
1 + 16 + 100 + 16 + 1= 134 পিক্সেল। - এলিমেন্ট উচ্চতা:
1 + 16 + 100 + 16 + 1= 134 পিক্সেল।
content-box-এর এই ডিফল্ট আচরণ কাজ করার সময় খুব বিরক্তিকর হতে পারে, কিন্তু সৌভাগ্যক্রমে, এটা সহজে চেঞ্জ করা যায়!
ডিফল্ট box-sizing: content-box ডিক্লেরেশন ইউজার এজেন্ট স্টাইলশীট থেকে ইনহেরিট হয়, যা সব ওয়েব ব্রাউজারে বিল্ট-ইন।
border-box কে রেসকিউ
আপনি সহজে content-box ভ্যালুকে border-box ভ্যালু দিয়ে ওভাররাইড করতে পারেন, যা ব্রাউজার এলিমেন্টের সাইজ ক্যালকুলেট করে সেটির বিপরীত ইফেক্ট ফেলে:
box-sizing: border-box;আপনার box-sizing প্রপার্টিকে border-box সেট করে ব্রাউজার আপনার এলিমেন্টগুলোর প্রিসাইজ প্রস্থ এবং উচ্চতায় রেন্ডার করবে যা আপনি এলিমেন্টে height এবং width প্রপার্টিতে স্পেসিফাই করেছেন:
div { width: 100px; height: 100px; padding: 16px; border: 1px solid; box-sizing: border-box; }ফলাফল:
border-box ভ্যালু ব্রাউজারকে ইনক্লুড করবাপ ফেলে (নয় যোগ) স্পেসিফাইড প্যাডিং এবং বর্ডার ভ্যালুগুলো এলিমেন্টের টোটাল প্রস্থ এবং উচ্চতা ক্যালকুলেট করার সময়।
border-box দিয়ে, কোনো padding বা border ভ্যালু আপনার এলিমেন্টে যোগ করলেও, এলিমেন্টের টোটাল সাইজ হবে সেই ভ্যালু যা আপনি height এবং width প্রপার্টিতে স্পেসিফাই করেছেন।
গুড মেজার হিসেবে এখানে একটি সাইড-বাই-সাইড তুলনা:
উপরের দুটি এলিমেন্টের স্পেসিফাইড প্রস্থ এবং উচ্চতা ১০০ পিক্সেল, কিন্তু কেবল ২য় এলিমেন্টই সেই স্পেসিফাইড ভ্যালুগুলো রেসপেক্ট করে কারণ সেটি border-box ব্যবহার করে।
content-box vs border-box সংক্ষেপে:
content-boxপ্যাডিং এবং বর্ডার ভ্যালুগুলোর সাথে এলিমেন্টের হাইট/উইডথ ভ্যালু কম্বাইন করে এবং টোটাল রেন্ডার করে।border-boxপ্যাডিং এবং বর্ডার ভ্যালুগুলো এলিমেন্টের প্রস্থ/উচ্চতার অংশ হিসেবে ইনক্লুড করে।
সব জায়গায় border-box ব্যবহার করুন
এখন আপনি জানেন border-box ব্রাউজারকে HTML এলিমেন্টগুলো আপনার CSS-এ স্পেসিফাইড আকচুয়াল সাইজে রেন্ডার করাতে। কিন্তু আপনি border-box আপনার সকল HTML এলিমেন্টে কীভাবে প্রয়োগ করবেন?
এটা আপনার স্টাইলশীটের খুব শিরোনামে নিচের CSS রুল-সেট যোগ করার মতো সহজ:
*, *:before, *:after { box-sizing: border-box; }উপরের কোড CSS-এর ইউনিভার্সেল সিলেক্টর * ব্যবহার করে border-box ভ্যালু প্রয়োগ করে box-sizing প্রপার্টিতে:
- সব নরমাল এলিমেন্ট সিলেক্টর (
div,p,button, ইত্যাদি) - সকল
:beforeএবং:afterসিউডো সিলেক্টর
border-box আপনার সকল HTML এলিমেন্টে ব্যবহার করলে, আপনাকে আর চিন্তা করতে হবে না আপনার ব্রাউজার আপনার এলিমেন্টগুলোর সাইজ কীভাবে রেন্ডার করছে। এটি সবসময় সেই হাইট এবং প্রস্থ হবে যা আপনি নিজে স্পেসিফাই করেছেন।
