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