ارتفاع CSS

ویژگی ارتفاع CSS ارتفاع عناصر HTML را تعیین می کند. به عنوان یک قاعده ، ارتفاع همیشه ارتفاع منطقه محتوا را توصیف می کند. هنگامی که اندازه جعبه دارای مقدار حاشیه جعبه است نیز می توان ارتفاع ناحیه مرزی را تنظیم کرد.

بررسی ویژگی ارتفاع

ارتفاع CSS ارتفاع جعبه ها را کنترل می کند. ویژگی با تمام مقادیر طول (درصد و شاخص های طول) کار می کند. مقادیر منفی را نمی پذیرد.

این مثال <div> را با 150 پیکسل و 600 پیکسل عرض تنظیم می کند:

div {
    height: 150px;
    width: 600px;
    background-color: lavender;
}

اندازه CSS توسط مرورگرها به طور خودکار قابل محاسبه است. اگر ویژگی CSS height را روی خودکار تنظیم کنید این گزینه امکان پذیر است.

در اینجا لیستی از ویژگی های اندازه CSS برای کنترل ارتفاع عناصر وجود دارد.

در مثال بعدی ، ارتفاع <div> را روی 150 پیکسل و 50٪ عرض تنظیم می کنیم:

div {
    height: 150px;
    width: 50%;
    background-color: lavender;
}

توجه: خصوصیات عرض و ارتفاع شامل حاشیه ،پدینگ یا حاشیه نیست. در عوض ، آنها پارامترهای منطقه را در داخل مرز ، پدینگ و حاشیه عنصر تنظیم می کنند.

حداکثر ارتفاع

ویژگی max-height برای تعیین حداکثر ارتفاع عناصر است. قوانین استفاده نشان می دهد که ویژگی با تمام مقادیر طول مثبت (درصد و شاخص های طول) کار می کند.

مثال زیر ارتفاع <div> را تنظیم می کند. با این حال ، بزرگتر از حداکثر ارتفاع مشخص شده است. در نتیجه ، حداکثر قد جایگزین قد می شود.

div {
    height: 320px;
    width: 600px;
    max-height: 150px;
    background-color: rebeccapurple;
    text-align: center;
    border: solid 2px;
    color: white;
}

توجه: حداکثر ارتفاع ویژگی خاصیت را نادیده می گیرد ، اما حداقل ارتفاع حداکثر ارتفاع را از بین می برد.

حداقل height

CSS-min-height برای تنظیم حداقل ارتفاع عناصر است. با مقادیر طول مثبت کار می کند. به یاد داشته باشید که ارتفاع دقیقه هم جایگزین حداکثر قد و هم قد می شود.

مثال زیر ارتفاع و حداکثر ارتفاع را برای <div> تنظیم می کند ، اما CSS min-height هر دو ویژگی را نادیده می گیرد.

div {
    height: 100px;
    width: 600px;
    max-height: 300px;
    min-height: 200px;
    background-color: rebeccapurple;
    text-align: center;
    border: solid 2px;
    color: white;
}

نکات مهم ارتفاع CSS:

• تفاوت بین قد: 100٪ و قد: خودکار این است که مقدار درصد به عنصر ارتفاع والد خود را می دهد. ارتفاع خودکار انعطاف پذیر است زیرا براساس ارتفاع عناصر فرزندان آن تنظیم می شود.
• ارتفاع CSS روی عناصر درون خطی ، گروه های ستون و ستون های جدول کار نمی کند.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.