width, max-width এবং margin: auto এর ব্যবহার

পূর্ববর্তী অধ্যায় এ উল্লেখ করা হয়েছিল যে, block-level এলিমেন্ট সবসময়ই ব্যবহারযোগ্য পূর্ণ প্রসস্থ জায়গা দখল করে (ডানে ও বায়ে যতটা সম্ভব প্রসারিত হয়)

block-level এলিমেন্ট এর প্রসস্থতা নির্ধারণ করে দিলে ধারক এর প্রসারিত হওয়া বন্ধ করে দেয়া যেতে পারে। তারপর, আপনি মার্জিন auto হিসেবে সেট করে দিতে পারেন, এর ধারক এর মধ্যে এলিমেন্ট হরিজেন্টালি সেন্টার হিসেবে। এলিমেন্টটি নির্দিষ্ট করা প্রসস্ততা পর্যন্তিই জায়গা দখল করতে পারবে এবং বাকি খালি জায়গা দুই মার্জিন এর মধ্যে সমানভাবে ভাগ হবে।

যখন ব্রাউজার উইন্ডো এর আকার এলিমেন্ট এর প্রসস্থতা থেকে ছোট হবে তখন <div> সমস্যা সৃষ্টি করবে। তখন ব্রাউজার একটি horizontal scrollbar যোগ করবে।

এর সমাধান হচ্ছে max-width ব্যবহার করা, এটি ছোট উইন্ডোতে ব্রাউজার হ্যান্ডলিং সহজ করে। যখন ছোট কোন ডিভাইস এ সাইট ভিজিট করা হয় তখন এটি খুবই গুরুত্বপূর্ণ।

টিপস: দুটি div এর মধ্যে পার্থক্য বোজার জন্য ব্রাউজার উইন্ডোকে 500px এর চেয়ে ছোট করুন।

এখানে দুটি div এর উদাহরণ দেয়া হলো:

div.ex1 {
     width: 500px;
     margin: auto;
     border: 3px solid #8AC007;
 }
 
 div.ex2 {
     max-width: 500px;
     margin: auto;
     border: 3px solid #8AC007;
 }