সিএসএস সর্বোচ্চ প্রস্থ - Css Max-width



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


width, max-width এবং margin: auto

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

এই <div> এলিমেন্টটিতে width প্রোপার্টির মান দেয়া হয়েছে 550px এবং margin প্রোপার্টির মান দেয়া হয়েছে auto।

এলিমেন্টের width বা প্রস্থ (550px) থেকে ব্রাউজারের উইন্ডো ছোট হলে উপরের <div> এলিমেন্টটি নিয়ে সমস্যায় পড়তে হবে। অর্থাৎ ব্রাউজার একটি হরিজন্টাল স্ক্রলবার তৈরি করবে।

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

এই <div> এলিমেন্টটিতে max-width প্রোপার্টির মান নির্ধারণ করা হয়েছে 550px এবং margin প্রোপার্টির মান দেয়া হয়েছে auto।

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

ওপরের উদাহরণ দুটির css কোড নিচে দেখুন।

উদাহরণ দেখুন

.ex1{
width: 550px;
margin: auto;
border: 3px solid #73AD21;
}
.ex2{
max-width: 550px;
margin: auto;
border: 3px solid #73AD21;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.