একটি length প্রকাশ করার জন্য CSS-এ বিভিন্ন ইউনিট রয়েছে।
অনেক CSS প্রপার্টি "length" মান নেয়, যেমন width, margin, padding, font-size ইত্যাদি।
Length হলো একটি সংখ্যা, যার পরে একটি length ইউনিট থাকে, যেমন 10px, 2em ইত্যাদি।
সংখ্যা এবং ইউনিটের মধ্যে কোনো হোয়াইটস্পেস থাকতে পারে না। তবে, মান 0 হলে, ইউনিটটি বাদ দেওয়া যায়।
কিছু CSS প্রপার্টির জন্য, ঋণাত্মক length অনুমোদিত।
দুই ধরনের length ইউনিট রয়েছে: অ্যাবসোলিউট এবং রিলেটিভ।
অ্যাবসোলিউট length ইউনিট নির্দিষ্ট থাকে এবং এগুলোর যেকোনো একটিতে প্রকাশিত length ঠিক সেই আকারেই দেখাবে।
স্ক্রিনে ব্যবহারের জন্য অ্যাবসোলিউট length ইউনিট প্রস্তাবিত নয়, কারণ স্ক্রিনের আকার অনেক পরিবর্তিত হয়। তবে, আউটপুট মাধ্যম জানা থাকলে এগুলো ব্যবহার করা যায়, যেমন প্রিন্ট লেআউটের জন্য।
| ইউনিট | বিবরণ |
|---|---|
| cm | সেন্টিমিটার |
| mm | মিলিমিটার |
| in | ইঞ্চি (1in = 96px = 2.54cm) |
| px * | পিক্সেল (1px = 1in-এর 1/96 অংশ) |
| pt | পয়েন্ট (1pt = 1in-এর 1/72 অংশ) |
| pc | পাইকা (1pc = 12 pt) |
* পিক্সেল (px) ভিউয়িং ডিভাইসের সাপেক্ষে নির্ধারিত। কম-dpi ডিভাইসের জন্য, 1px হলো ডিসপ্লের একটি ডিভাইস পিক্সেল (ডট)। প্রিন্টার এবং উচ্চ রেজোলিউশনের স্ক্রিনের জন্য 1px একাধিক ডিভাইস পিক্সেল বোঝায়।
রিলেটিভ length ইউনিট অন্য একটি length প্রপার্টির সাপেক্ষে একটি length নির্ধারণ করে। রিলেটিভ length ইউনিট বিভিন্ন রেন্ডারিং মাধ্যমে ভালোভাবে স্কেল করে।
| ইউনিট | বিবরণ |
|---|---|
| em | এলিমেন্টের font-size-এর সাপেক্ষে (2em মানে বর্তমান ফন্টের আকারের 2 গুণ) |
| ex | বর্তমান ফন্টের x-height-এর সাপেক্ষে (খুব কম ব্যবহৃত হয়) |
| ch | "0" (শূন্য)-এর প্রস্থের সাপেক্ষে |
| rem | রুট এলিমেন্টের font-size-এর সাপেক্ষে |
| vw | ভিউপোর্টের* প্রস্থের 1%-এর সাপেক্ষে |
| vh | ভিউপোর্টের* উচ্চতার 1%-এর সাপেক্ষে |
| vmin | ভিউপোর্টের* ছোট মাত্রার 1%-এর সাপেক্ষে |
| vmax | ভিউপোর্টের* বড় মাত্রার 1%-এর সাপেক্ষে |
| % | প্যারেন্ট এলিমেন্টের সাপেক্ষে |
টিপস: পুরোপুরি স্কেলযোগ্য লেআউট তৈরিতে em এবং rem ইউনিট বাস্তবসম্মত!
* ভিউপোর্ট = ব্রাউজার উইন্ডোর আকার। ভিউপোর্ট 50cm প্রশস্ত হলে, 1vw = 0.5cm।