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

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

ادامه مطلب

 

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

 

div {
  height: 100px;
  width: 100px;
}

 

نکته مهمی که باید توجه شود این است که همیشه ارتفاع عنصر دقیقا همانی نخواهد بود که توسط ویژگی height تعیین شده است. امکان دارد عنصر دارای padding یا همان فاصله داخلی باشد که مقدار آن به ارتفاع نهایی عنصر اضافه می شود.

 

div {
  height: 100px;
  padding: 10px;

  /* height == 10px + 100px + 10px == 120px */
}

 

به عنوان نمونه در مثال بالا ارتفاع نهایی عنصر 120 پیکسل خواهد بود چرا که سمت بالا و پایین عنصر دارای 10 پیکسل فضای داخلی می باشند.

البته این روش را می توان تغییر داد. یعنی می توان طوری عمل کرد که حتی باوجود padding ارتفاع نهایی همان 100 پیکسل باشد. برای این کار می توان از ویژگی box-sizing استفاده کرد که در مطالب آینده آن را بررسی خواهیم کرد.

برای عناصر خطی مثل <a> و یا <span> ویژگی height هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی ارتفاع اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

 

span {
  display: inline-block;
  height: 100px;
}

 

نکته دیگر اینکه نتیجه نهایی ارتفاع عنصر می تواند توسط ویژگی های min-height و max-height بازنویسی شود و عرض دقیقا آنچه که توسط ویژگی height تعیین شده است نباشد.

 

مقادیر ویژگی height

 

height: <length> | <percentage> | auto | inherit

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 

height: 100px;
height: 4rem;
height: 10vh;
height: 100cm;

 

 

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به ارتفاع نگهدارنده یا همان پدر عنصر تعیین می کند.

 

.dad {
  height: 100px;
}

.dad .boy {
  height: 10%; /* 10px */
}

 

 

auto

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

ناگفته نماند که auto مقدار اولیه یا همان پیشفرض ارتفاع می باشد.

 

inherit

با استفاده از کلمه کلیدی inherit مقدار height عنصر برابر با مقدار ویژگی height عنصر پدر خواهد بود.

 

مثال

دموی زیر را بررسی کنید: