সিএসএস width এবং max-width
width, max-width এবং margin: auto এর ব্যবহার
পূর্ববর্তী অধ্যায় থেকে আমরা জেনেছি যে, একটি ব্লক-লেভেল এলিমেন্ট সবসময় সম্পূর্ণ প্রস্থ অর্থাৎ বাম এবং ডানদিকে যতটা সম্ভব জায়গা দখল করে।
ব্লক লেভেল এলিমেন্টে width সেট করে দিলে এর কন্টেইনারের শেষ প্রান্ত পর্যন্ত প্রস্থ দখল করতে পারে না।
এর পরে আপনি এলিমেন্টটিকে কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টারে রাখতে চাইলে margin প্রোপার্টির ভ্যালু auto সেট করতে হবে।
এক্ষেত্রে এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে এবং বাকী অংশটুকু উভয় পাশের মার্জিনের জন্য সমানভাবে ভাগ করে দিবে।
<div> এলিমেন্টটিতে width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto।এলিমেন্টের width(600px) থেকে ব্রাউজার উইন্ডো ছোট হলে উপরের <div> এলিমেন্ট নিয়ে সমস্যায় পড়তে হবে।
অর্থাৎ ব্রাউজার একটি হরিজন্টাল স্ক্রলবার সৃষ্টি করবে।
এই সমস্যা থেকে উত্তরণের জন্য max-width প্রোপার্টি ব্যবহার করা হয়।
<div> এলিমেন্টটিতে max-width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto।বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত <div> দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।
নিচের উদাহরণে এদের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.width {
width: 600px;
margin: auto;
padding: 8px;
border: 2px solid teal;
}
div.max-width {
max-width: 600px;
margin: auto;
padding: 8px;
border: 2px solid green;
}
</style>
</head>
<body>
<h2>width এবং max-width প্রোপার্টির ব্যবহার</h2>
<div class="width">এই div এলিমেন্টের "width:600px;" সেট করা হয়েছে।</div>
<br>
<div class="max-width">এই div এলিমেন্টের "max-width:600px;" সেট করা হয়েছে।</div>
</body>
</html>
বিঃদ্রঃ দুটি <div> এর মধ্যে পার্থক্য় বুঝার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।
ফলাফল