সি এস এস ডায়মেনশন (CSS Dimension)

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

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8%e0%a7%87%e0%a6%b8-%e0%a6%a1%e0%a6%be%e0%a7%9f%e0%a6%ae%e0%a7%87%e0%a6%a8%e0%a6%b6%e0%a6%a8-css-dimension/