সব HTML এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যায়। CSS-এ, ডিজাইন এবং লেআউট নিয়ে আলোচনার সময় "বক্স মডেল" শব্দটি ব্যবহার করা হয়।
CSS বক্স মডেল মূলত এমন একটি বক্স, যা প্রতিটি HTML এলিমেন্টকে ঘিরে রাখে। এতে থাকে: মার্জিন, বর্ডার, প্যাডিং এবং প্রকৃত কনটেন্ট। নিচের ছবিতে বক্স মডেল দেখানো হয়েছে:
বিভিন্ন অংশের ব্যাখ্যা:
বক্স মডেল আমাদের এলিমেন্টের চারপাশে বর্ডার যোগ করতে, এবং এলিমেন্টগুলোর মধ্যে জায়গা নির্ধারণ করতে সাহায্য করে।
বক্স মডেলের একটি প্রদর্শনী:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}সব ব্রাউজারে একটি এলিমেন্টের প্রস্থ ও উচ্চতা সঠিকভাবে সেট করতে, বক্স মডেল কীভাবে কাজ করে তা জানা প্রয়োজন।
গুরুত্বপূর্ণ: CSS দিয়ে একটি এলিমেন্টের width এবং height প্রপার্টি সেট করলে, আপনি শুধু কনটেন্ট এরিয়ার প্রস্থ ও উচ্চতা সেট করছেন। একটি এলিমেন্টের সম্পূর্ণ আকার হিসাব করতে, আপনাকে প্যাডিং, বর্ডার এবং মার্জিনও যোগ করতে হবে।
এই <div> এলিমেন্টের মোট প্রস্থ হবে 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}এখানে হিসাবটি দেওয়া হলো:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350pxএকটি এলিমেন্টের মোট প্রস্থ এভাবে হিসাব করতে হয়:
মোট এলিমেন্ট প্রস্থ = width + বাম padding + ডান padding + বাম border + ডান border + বাম margin + ডান margin
একটি এলিমেন্টের মোট উচ্চতা এভাবে হিসাব করতে হয়:
মোট এলিমেন্ট উচ্চতা = height + উপরের padding + নিচের padding + উপরের border + নিচের border + উপরের margin + নিচের margin