تعیین ارتفاع المان در CSS – ویژگی height

در CSS از ویژگی height برای تعیین ارتفاع المان های HTML استفاده می‌شود. این ویژگی در کنار ویژگی width برای تعیین ابعاد (ارتفاع و پهنا) المان به کار می‌رود.

نحوه تعیین ارتفاع المان های مختلف با کمک ویژگی height

برای تعیین ارتفاع المان های مختلف با کمک ویژگی height در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای این ویژگی مشخص کنید:

div.demo {
  height: 250px;
  border: 1px solid black;
}

با توجه به قانون CSS فوق، مقدار 250px برای ویژگی height باعث می‌شود ارتفاع تمام المان های <div> که دارای کلاس demo هستند برابر با 250 پیکسل شود. تصویر زیر نتیجه این قانون را روی یک المان نمونه همراه با خط مرزی پیرامون المان نمایش می‌دهد:

چند نکته در مورد تعیین ارتفاع المان در CSS

• به صورت پیشفرض، مقدار ویژگی height ارتفاع بخش محتوای المان را مشخص می‌کند. اما اگر ویژگی box-sizing روی border-box تنظیم شده باشد این مقدار padding و border المان را هم شامل می‌شود.
• ویژگی های min-height و max-height می‌توانند ارتفاع المان را محدود کنند و مقدار ویژگی height را اورراید می‌کنند. برای مثال اگر مقدار ویژگی height برابر 200px و مقدار ویژگی min-height برابر با 250px باشد ارتفاع المان 250 پیکسل خواهد بود.

انواع مقادیر متداول برای ویژگی height

• auto: این مقدار، مقدار پیشفرض برای ویژگی height است و محاسبه و تعیین ارتفاع المان را برعهده مرورگر می‌گذارد.
• طول: درج مقدار با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای ویژگی height یکی از روش‌های رایج برای تعیین ارتفاع المان براساس طول است. برای مثال مقدار 250px و 5cm.
• درصد: درج مقدار برحسب درصد برای ویژگی height ارتفاع المان را به صورت درصدی از ارتفاع بلوکی که المان را دربرگرفته مشخص می‌کند. برای مثال مقدار 50%.

بازگشت به فهرست مجموعه آموزشی CSS