خانه دوره‌های رایگان آموزش رایگان HTML و CSS ویژگی width و height در CSS | تنظیم عرض و ارتفاع عناصر

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

دسته‌ها: آموزش رایگان HTML و CSS، دوره‌های رایگان

یکشنبه 28 اردیبهشت 1399

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

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

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

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

<html>
	<head>
		<title>Page title</title>
		<style>
			#my-paragraph {
				width: 150px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<p id="my-paragraph"> یک پاراگراف با عرض ۱۵۰ پیکسل و ارتفاع ۱۰۰ پیکسل. </p>
	</body>
</html>

<html>

<head>

<title>Page title</title>

<style>

#my-paragraph {

width: 150px;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

<p id="my-paragraph"> یک پاراگراف با عرض ۱۵۰ پیکسل و ارتفاع ۱۰۰ پیکسل. </p>

</body>

</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>
	<head>
		<title>Page title</title>
		<style>
			#my-paragraph {
				width: 50%;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<p id="my-paragraph"> یک پاراگراف با عرض ۵۰ درصد و ارتفاع ۱۰۰ پیکسل. </p>
	</body>
</html>

<html>

<head>

<title>Page title</title>

<style>

#my-paragraph {

width: 50%;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

<p id="my-paragraph"> یک پاراگراف با عرض ۵۰ درصد و ارتفاع ۱۰۰ پیکسل. </p>

</body>

</html>

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

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

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

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

انتخابگر‌ها در CSS | معرفی Selector های مهم CSS درس قبلی

کار با ویژگی margin و padding در CSS و بررسی تفاوت آنها درس بعدی

2 پاسخ به “ویژگی width و height در CSS | تنظیم عرض و ارتفاع عناصر”

محمد رضا گفت:
۱۲ مرداد ۱۴۰۱ در ۲:۳۷ ب٫ظ
کار چون با واحدهای نسبی بهتر نیست چون نسبت به عرض صفحه نمایش دستگاه کاربر تنظیم میشه وامکان داره هر کاربری با دستگاه‌های متفاوتی وارد بشه واگه با واحدهای مطلق تنظیم بشه به مشکل میخوره؟
- علی سلطانی گفت:
  ۱۲ مرداد ۱۴۰۱ در ۵:۰۶ ب٫ظ
  سلام وقت بخیر
  به هیچ عنوان نمی‌تونیم بگیم یکیش خوبه یکیش بد
  هردو در جای خودش قالب استفادست. بله اگر فقط از واحد های نسبی استفاده کنید یا فقط از واحد های مطلق استفاده کنید در دستگاه های مختلف سایت دچار مشکل میشه

دیدگاهتان را بنویسید لغو پاسخ

You must be logged in to post a comment.