ویژگی height در HTML

html height attribute
24 آذر 1403

آشنایی با ویژگی height در HTML


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


در HTML ما می‌توانیم از ویژگی height به دو روش استفاده کنیم: به صورت inline و در CSS. استفاده از آن به صورت inline به ما این امکان را می‌دهد که یک ارتفاع خاص به یک عنصر بدهیم، در حالی که استفاده از CSS به ما این امکان را می‌دهد که کد خود را تمیزتر و سازمان‌یافته‌تر نگه داریم. به همین دلیل، توصیه می‌شود که برای استایل‌دهی به عناصر، از CSS استفاده کنید.


با استفاده از ویژگی height می‌توانیم مشخص کنیم که یک عنصر چه ارتفاعی داشته باشد. به عنوان مثال، اگر شما بخواهید یک عکس را در یک ارتفاع خاص نمایش دهید، می‌توانید از این ویژگی استفاده کنید. همچنین، این ویژگی می‌تواند به ما کمک کند تا عناصر مختلف خود را به درستی در کنار هم بچینیم.


مثال‌های زیادی وجود دارد که از ویژگی height استفاده می‌کنیم. اما یکی از نکات مهم این است که توجه داشته باشیم که استفاده غیرمؤثر از این ویژگی می‌تواند باعث به هم ریختن طرح‌بندی وبسایت ما شود. پس همیشه سعی کنید به درستی از آن استفاده کنید و ارتفاع‌های منطقی و معقول تعیین کنید.


مثال کد با ویژگی height


<div style="height: 200px; width: 300px; background-color: lightblue;">
این یک باکس است
</div>
<img src="example.jpg" height="300" alt="مثال تصویر">

توضیح خط به خط کد



خط 1: <div style="height: 200px; width: 300px; background-color: lightblue;">
این خط یک باکس را با ارتفاع ۲۰۰ پیکسل، عرض ۳۰۰ پیکسل و پس‌زمینه آبی روشن ایجاد می‌کند.

خط 2: این یک باکس است
متن داخل باکس نمایش داده می‌شود.

خط 3: </div>
این خط پایان باکس را مشخص می‌کند.

خط 4: <img src="example.jpg" height="300" alt="مثال تصویر">
این خط یک تصویر را با ارتفاع ۳۰۰ پیکسل بارگذاری می‌کند و متن جایگزین برای تصویر را تعیین می‌کند.

خط 5: انتهای تگ تصویر
پایان تعریف تصویر.

سوالات متداول

؟

چطور می‌توانم ارتفاع یک تصویر را تغییر دهم؟

؟

آیا می‌توانم ارتفاع یک div را با CSS تعیین کنم؟

؟

تفاوت height در CSS و HTML چیست؟