CSS dimension হচ্ছে এমন একটি properties যা element এর height এবং width নিয়ন্ত্রণ করে।
height এবং width নির্ধারণ করা
এলিমেন্ট এর উচ্চতা এবং প্রসস্থতা নির্ধারণ করতে height
এবং width
প্রোপার্টিজ ব্যবহার করা হয়।
height
এবং width
সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।
[<div> এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels]
নোটঃ height
এবং width
প্রোপার্টিজ প্যাডিং, বর্ডার বা মার্জিন সমন্নয় করে না; তারা এলিমেন্ট এর প্যাডিং, বর্ডার বা মার্জিন এর ভিতরের উচ্চতা/প্রসস্থতা নির্ধারণ করে।
নিচের উদাহরণটি দেখাচ্ছে যে <div>
এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels
div { width: 500px; height: 100px; border: 3px solid #8AC007; }
সর্বচ্চ প্রসস্থতা নির্ধারণ করে দেয়া
max-width
প্রোপার্টি এলিমেন্ট এর সর্বচ্চ প্রসস্থতা নির্ধারণ করতে ব্যবহৃত হয়।
max-width
সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।
ব্রাউজার এর উইন্ডো এর প্রসস্থতা যখন <div>
এলিমেন্ট এর চেয়ে ছোট হয় তখন এটি সমস্যা সৃষ্টি করে। ব্রাউজার তখন horizontal scrollbar প্রদর্শন করে।
max-width
ব্যবহার করলে ব্রাউজার এই সমস্যা ভালভাবে হ্যান্ডলিং করতে পারে।
টিপসঃ দুটি div এর মধ্যে পার্থক্য দেখার জন্য ব্রাউজারকে টেনে 500px এর চেয়ে ছোট করুন।
নোটঃ max-width
প্রোপার্টি এর মান width
কে ওভাররাইড করে।
নিচের উদাহরণটি 100 pixels উচ্চতা এবং 500 pixels max-width বিশিষ্ট <div>
এলিমেন্ট প্রদর্শন করে।
div { max-width: 500px; height: 100px; border: 3px solid #8AC007; }
CSS Dimension এর সকল Properties
প্রোপার্টি | বর্ণনা | মান |
height
auto |
element এর height নির্ধারণ | length
% inherit |
max-height | একটি element এর maximum height নির্ধারণ | none
length % inherit |
max-width | একটি element এর maximum width নির্ধারণ | none
length % inherit |
min-height | একটি element এর minimum height নির্ধারণ | length
% inherit |
min-width | একটি element এর minimum width নির্ধারণ | length
% inherit |
width | একটি element এর width নির্ধারণ | auto
length % inherit |