সিএসএস প্রস্থ - CSS Width

যে কোন আকারের স্ক্রীন বিশেষ করে ছোট স্ক্রীনে ওয়েব পেজের সব কন্টেন্ট গুলো ঠিক ভাবে প্রদর্শনের জন্য সিএসএস এর width, min-width, max-width ইত্যাদি খুব প্রয়োজনীয় ও কার্যকরী কিছু প্রপার্টি।

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

<div>, <form> ইত্যাদি সকল ব্লক লেভেল এলিমেন্ট গুলো বাঁ ও ডান দিকে সম্ভাব্য সব টুকু স্থান দখল করে নেয়। ব্লক লেভেল এলিমেন্টের width বা প্রস্থ নির্ধারণ করে দিলে এটা তার parent কন্টেইনারের শেষ প্রান্ত পর্যন্ত প্রস্থ সম্পূর্ণ স্থান দখল করতে পারে না, একপাশে কেবল নির্ধারিত স্থান টুকুই দখল করে।

এই এইচটিএমএল এলিমেন্টটিকে কন্টেইনারের মধ্যে অনুভূমিকভাব বা horizontal ভাবে মাঝ বরাবর স্থাপন করার জন্য margin প্রোপার্টির মান auto নির্ধারণ করতে হবে। এর ফলে এইচটিএমএল এলিমেন্টটি নির্ধারিত প্রস্থ দখল করবে এবং বাকী অংশটুকু অনুভূমিকভাব বা horizontal ভাবে উভয় পাশের মার্জিনের জন্য সমানভাবে ভাগ করে প্রদর্শন করবে।

এইচটিএমএল এলিমেন্টের width বা প্রস্থ (450px) থেকে ব্রাউজারের উইন্ডো ছোট হলে উপরের <div> এলিমেন্টটি ব্রাউজার এর স্ক্রীনে একটি আনুভূমিক বা horizontal ভাবে একটি স্ক্রলবার তৈরি করে।

উপরের উদাহরনের জন্য নিচে সিএসএস স্টাইল কোড গুলো দেখুন।

div {
    width: 450px;
    margin: auto;
    border: 5px solid slateblue;
    }

কোড এডিটর

এই সমস্যা সমাধানের জন্য সিএসএস এর max-width প্রোপার্টি ব্যবহার করা হয়।

উপরের উদাহরনের জন্য নিচে সিএসএস স্টাইল কোড গুলো দেখুন।

div {
    max-width: 450px;
    margin: auto;
    border: 5px solid slateblue;
    }

কোড এডিটর

নোট - এই অধ্যায়ে ব্যবহৃত <div> দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর আকার 450px থেকে ছোট করুন।

সকল width প্রোপার্টি