X

X

X

CSS Layout - প্রস্থ ও সর্বাধিক প্রস্থ


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

আগের চ্যাপ্টারে উল্লেখ করা হয়েছিলো, একটি ব্লক লেভেল ইলামেন্ট সবসময় তার এরিয়ার মধ্যে পুরো প্রস্থ ধারণ করে অর্থাৎ, এদের প্রস্থ সবসময় ১০০% হয়ে থাকে। কিন্তু আমরা চাইলে এই ডিফল্ট মানের পরিবর্তন করতে পারি।

width ব্যবহার করে এই মান পরিবর্তন করা হয়। তারপর margin: auto; করার ফলে আনুভূমিকভাবে এটি কেন্দ্র বরারবর উপস্থাপিত হয়। এর ফলে ইলামেন্টটি কাঙ্খিত প্রস্থবিশিষ্ট হবে এবং অবশিষ্ট প্রস্থ সমান দুইভাগে এর ডানে ও বামে বন্টন হবে।

This <div> element has a width of 500px, and margin set to auto.

বি:দ্র: যখন <div> ইলামেন্টের প্রস্থ স্ক্রিণের প্রস্থের চেয়ে বেশি হয়, তখন ব্রাউজার স্বয়ংক্রিয়ভাবে একটি আনুভূমিক স্ক্রলবার যুক্ত করে, যাতে ইলামেন্টটি সঠিকভাবে উপস্থাপিত হয়। ফলে সমস্যা হচ্ছে, পেজটি রেসপনসিভ বৈশিষ্ট্য হারায়।

এক্ষেত্রে সমাধান হলো max-width এর ব্যবহার করায়। ফলে যখন ব্রাউজারের প্রস্থ কাঙ্খিত প্রস্থের চেয়ে বেশি হবে, তখন এটি উক্ত প্রস্থবিশিষ্ট হবে, কিন্তু যদি ব্রাউজারের প্রস্থ ছোটো হয়, তবে এটি তখন ১০০% প্রস্থ বিশিষ্ট হবে। অর্থাৎ, max-width প্রপার্টি ব্যবহার করার ফলে ওয়েবপেজ তার রেসপনসিভ বৈশিষ্ট্য হারাচ্ছে না।

This <div> element has a max-width of 500px, and margin set to auto.

টিপস: ভালোভাবে ব্যাপারটি বোঝার জন্য ব্রাউজারের প্রস্থ 500px এর কম করুন।

নিচে উপরের দুটি div ইলামেন্টের কোড বর্ণনা করা হলো:

Code Example

<style>
div.ex1 {
    width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width:500px;
    margin: auto;
    border: 3px solid #73AD21;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।