আগের চ্যাপ্টারে বলা হয়েছিল; একটি ব্লক-লেভেল এলিমেন্ট সবসময় যতটা সম্ভব প্রশস্ততা (বাম ও ডানে যতদূর সম্ভব) দখল করে।
একটি ব্লক-লেভেল এলিমেন্টের width সেট করলে এটি তার কন্টেইনারের প্রান্ত পর্যন্ত বিস্তৃত হওয়া থেকে বিরত থাকবে। এরপর, এলিমেন্টটিকে তার কন্টেইনারের মধ্যে অনুভূমিকভাবে কেন্দ্রীভূত করতে আপনি margin-কে auto সেট করতে পারেন। এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে, এবং অবশিষ্ট জায়গা দুই মার্জিনের মধ্যে সমানভাবে ভাগ হবে:
মনে রাখবেন: উপরের <div>-এ সমস্যা তখন হয়, যখন ব্রাউজার উইন্ডো এলিমেন্টের প্রস্থের চেয়ে ছোট হয়। তখন ব্রাউজার পেজে একটি অনুভূমিক স্ক্রলবার যোগ করে।
এই পরিস্থিতিতে, এর বদলে max-width ব্যবহার করলে ছোট উইন্ডো পরিচালনায় ব্রাউজারের কার্যক্ষমতা উন্নত হবে। ছোট ডিভাইসে সাইট ব্যবহারযোগ্য করার সময় এটি গুরুত্বপূর্ণ:
টিপস: দুটি div-এর মধ্যে পার্থক্য দেখতে ব্রাউজার উইন্ডো 500px-এর কম প্রশস্ততায় রিসাইজ করুন!
উপরের দুটি div-এর একটি উদাহরণ এখানে দেওয়া হলো:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}