واحدها در CSS

در CSS واحدهای مختلفی برای تعریف طول وجود دارد.

بسیاری از ویژگی ها در CSS مقادیر طول را می پذیرند مانند width، margin، padding، font-size، border-width و ….

طول را با استفاده از یک عدد که پس از آن واحد آن ذکر می شود تعریف می کنند مانند 10px، 2em و ….

امکان قرار دادن حرف فاصله میان عدد و واحد آن در تعریف طول وجود ندارد اما اگر مقدار برابر صفر باشد تعریف واحد آن ضرورتی ندارد.

در برخی ویژگی ها امکان تعریف مقدار منفی وجود دارد.

دو نوع واحد طول وجود دارد. مطلق و نسبی.

طول مطلق

واحدهای طول مطلق ثابت بوده و مقادیر تعریف شده با این نوع واحدها به صورت اندازه مشخص نمایش داده می شوند.

مقادیر مطلق برای استفاده در صفحه پیشنهاد نمی شوند زیرا اندازه صفحه های نمایش بسیار متفاوت است. اما در صورتی که اندازه خروجی کاملا مشخص باشد مانند حالت پرینت، کاربرد آنها ایرادی ندارد.

در زیر جدولی از مقادیر مطلق آمده است:

واحد توضیحات
cm سانتی متر


mm میلی متر


in اینچ (1in = 96px = 2.54cm)


px * پیکسل (1px = 1/96th of 1in)


pt نقطه (1pt = 1/72 of 1in)


pc پیکاس (1pc = 12 pt)


*پیکسل نسبت به محدوده دید هر صفحه نمایش متغیر است. برای صفحات نمایش با وضوح تصویر کم 1 پیکسل برابر است با 1 نقطه از صفحه نمایش. برای پرینترها و صفحات نمایش با وضوح بالا 1 پیکسل برابر با چند نقطه از آن می شود.

واحدهای نسبی

واحدهای نسبی یک طول را نسبت به مقدار ویژگی طول دیگر تعریف می نمایند. این نوع واحد ها برای نمایش در اندازه های متفاوت صفحه نمایش عملکرد بهتری دارند.

در زیر جدولی از واحدهای طول نسبی آمده است:

واحد توضیحات
em متناسب با اندازه فونت عنصر است (2em به معنی 2 برابر اندازه کنونی فونت)


ex متناسب است با اندازه پهنای فونت جاری (به ندرت استفاده می شود)


ch متناسب است با پهنای کاراکتر “0” (صفر)


rem متناسب است با اندازه فونت عنصر پایه


vw *متناسب است با 1% اندازه پهنای صفحه نمایش


vh *متناسب است با 1% اندازه ارتفاع صفحه نمایش


vmin متناسب است با 1% بعد کوچکتر صفحه نمایش


vmax متناسب است با 1% اندازه بعد بزرگتر صفحه نمایش


% متناسب است با عنصر والد


نکته: واحدهای em و rem برای ایجاد چینش مقیاس بندی شده بسیار کاربردی هستند.

Viewport برابر است با اندازه صفحه. در صورتی که Viewport برابر 50cm پهنا داشته باشد آنگاه 1vw = 0.5cm.

پشتیبانی مرورگرها

عدد نشان داده شده زیر نماد هر مرورگر معرف اولین نسخه از آن مرورگر است که از واحد مشخص شده به صورت کامل پشتیبانی می کند:

واحد طول
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0* 19.0 6.0 20.0
vmax 26.0 پشتیبانی نمی شود 19.0 7.0 20.0
نکته: اینترنت اکسپلورر 9 از واحد vmin با نام غیر استاندارد vm پشتیبانی می کند

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *