সিএসএস বক্স মডেল
সিএসএস বক্স মডেল
সকল এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। আমরা যখন সিএসএসের মাধ্যমে ওয়েবপেজের ডিজাইন এবং লেআউট নিয়ে কথা বলি, তখন একটি টার্ম আমাদের কাছে চলে আসে তা হলো "box model"।
বক্স মডেল স্বাভাবিকভাবেই একটি বক্স যা প্রত্যেকটি এইচটিএমএল এলিমেন্টকে একটি বক্সের মধ্যে মুড়িয়ে দেয়। ইহা মার্জিন, বর্ডার, পেডিং এবং প্রকৃত কন্টেন্ট নিয়ে গঠিত হয়। নিচে ছবির মাধ্যেম বক্স মডেলের ব্যখ্যা দেওয়া হলঃ
উপরের ছবির বিভিন্ন অংশের ব্যাখ্যাঃ
- কন্টেন্ট - যা বক্সের কন্টেন্ট, যেখানে টেক্সট এবং ছবি প্রদর্শিত হয়।
- প্যাডিং - যা কন্টেন্টের চারপাশে ফাঁকা অংশের সৃষ্টি করে এবং ইহা স্বচ্ছ।
- বর্ডার - যা প্যাডিং এবং কন্টেন্টের চতুর্দিকে থাকে।
- মার্জিন - যা বর্ডারের বাহিরে ফাঁকা অংশের সৃষ্টি করে। প্যাডিং এর মত ইহাও স্বচ্ছ।
আমরা বক্স মডেল ব্যবহার করেও একটি এলিমেন্টের চারপাশে বর্ডার সেট করতে পারি এবং এলিমেন্টের মধ্যে স্পেস(space) রাখতে পারি।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: lightgrey;
width: 350px;
color: brown;
border: 30px solid blue;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>বক্স মডেল সাজানো</h2>
<p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</p>
<div>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।</div>
</body>
</html>
ফলাফল
width এবং height সেট করা
প্রত্যেকটি ব্রাউজারের জন্য এলিমেন্টের প্রস্থ(width) এবং দৈর্ঘ্য(height) সঠিকভাবে সেট করতে হলে আপনাকে অবশ্যই বক্স মডেলের ব্যবহার সম্পর্কে জানতে হবে।
বিঃদ্রঃ সিএসএস এর মাধ্যমে আপনি যখন একটি এলিমেন্টের দৈর্ঘ্য এবং প্রস্থ সেট করেন, তখন শুধুমাত্র কন্টেন্টের আয়তনের দৈর্ঘ্য এবং প্রস্থ সেট করেন।
কিন্তু একটি এলিমেন্টের সম্পূর্ণ আয়তন সেট করতে এর দৈর্ঘ্য এবং প্রস্থের সহিত আপনাকে অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন সংযুক্ত করতে হবে।
ধরুন, আপনি একটি <div> এলিমেন্টকে স্টাইল করতে চাচ্ছেন যার width হবে 350px, তাহলে সেটিকে নিচের উদাহরণের মত স্টাইল করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
background-color: lightsalmon;
width: 320px;
padding: 15px;
border: 5px solid black;
margin: 0;
}
</style>
</head>
<body>
<h2>সম্পূর্ণ প্রস্থ পরিমাপ করুন</h2>
<img src="images/natural.jpg" width="360" height="263" alt="natural">
<div> উপরের ছবিটির প্রস্থ 360px এবং এই এলিমেন্টটিরও সর্বমোট প্রস্থ 360px।</div>
</body>
</html>
ফলাফল
এখানে উপরের উদাহরণের সহজ হিসাব দেখানো হলোঃ
একটি এলিমেন্টের সম্পূর্ণ প্রস্থ হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ প্রস্থ = কন্টেন্টের প্রস্থ + বাম পাশের প্যাডিং + ডান পাশের প্যাডিং + বাম পাশের বর্ডার + ডান পাশের বর্ডার + বাম পাশের মার্জিন + ডান পাশের মার্জিন
একটি এলিমেন্টের সম্পূর্ণ উচ্চতা হিসাবের সূত্র হলোঃ
এলিমেন্টের সম্পূর্ণ উচ্চতা = কন্টেন্টের উচ্চতা + উপরের প্যাডিংন + নিচের প্যাডিং + উপরের বর্ডার + নিচের বর্ডার + উপরের মার্জিন + নিচের মার্জিন
বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার-৮ এবং এর আগের ভার্সনগুলোতে width প্রোপার্টির মধ্যে padding এবং border যুক্ত হয়ে যায়। তাই এই সমস্যা সমাধানের জন্য এইচটিএমএল পেজে <!DOCTYPE html> যুক্ত করুন।