ویژگی width و height در CSS | تنظیم عرض و ارتفاع عناصر


نویسنده:
یکشنبه ۲۸ اردیبهشت ۱۳۹۹
ویژگی width و height

در HTML هر عنصری که در صفحه وب نمایش داده ‌شود، می‌تواند دارای عرض و ارتفاع باشد. اگر برای یک عنصر بصورت دستی عرض و ارتفاع تعیین نشود، معمولا به اندازه محتوایی که درونش قرار دارد حجم می‌گیرد. برای تنظیم عرض و ارتفاع یک عنصر، به ترتیب از ویژگی width و height استفاده می‌شود.

معمولا برای مقداردهی به این ویژگی‌ها از واحد پیکسل (pixel) استفاده می‌شود. اما واحد‌های دیگری هم وجود دارند که در ادامه مهم‌ترین آنها را بیان می‌کنیم.

استفاده از ویژگی width و height در CSS

به مثال زیر توجه کنید:

در مثال بالا یک پاراگراف داریم که برای آن عرض ۱۵۰ پیکسل و ارتفاع ۱۰۰ پیکسل را تنظیم کرده‌ایم. همچنین برای اینکه اعمال width و height به راحتی در خروجی قابل تشخیص باشد، رنگ پس‌زمینه صورتی را برای آن تعیین کرده‌ایم.

خروجی کد بالا:

یک پاراگراف با عرض ۱۵۰ پیکسل و ارتفاع ۱۰۰ پیکسل.

نکته: عبارت px که بعد از اعداد قرار گرفته به معنای pixel است. پیکسل یکی از واحدهای پر استفاده در طراحی صفحات وب است.


واحد‌های اندازی گیری

بطور کلی واحد‌های اندازی‌گیری در CSS به ۲ بخش تقسیم می‌شوند:

  • واحد‌های مطلق (absolute)
  • واحد‌های نسبی (relative)

در ادامه به بررسی هرکدام از دسته‌ها می‌پردازیم.

واحد‌های مطلق (absolute)

به واحد‌هایی که ثابت هستند و هیچ عاملی روی آنها تاثیر نمی‌گذارد، مطلق یا همان absolute گویند. مانند پیکسل (px)، سانتی‌متر (cm)، میلی متر (mm) و… که می‌توان از آنها در طراحی وب استفاده کرد.

واحدهای نسبی (relative)

به واحد‌هایی که حداقل یک عامل بتواند روی آن تاثیر بگذارد، نسبی یا همان relative گویند. مانند واحد درصد (%) و واحد‌هایی مانند rem و em

به مثال زیر دقت کنید:

در این مثال ما عرض عنصر p موردنظرمان را روی 50% تنظیم کرده‌ایم، در اینجا چه عرض صفحه نمایش ما ۲۰۰ پیکسل باشد چه ۲۵۰۰ پیکسل، عنصر p ما نصف (50%) عرض را پوشش می‌دهد. یعنی عرض عنصر p به عرض صفحه نمایش کاربر وابسته است.

خروجی کد بالا:

یک پاراگراف با عرض ۵۰ درصد و ارتفاع ۱۰۰ پیکسل.

واحدهای rem و em هم بسیار مهم هستند. در آینده در یک مقاله جداگانه بصورت مفصل به آنها پرداخته می‌شود.

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

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

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