ویژگی bottom CSS
- صفحه قبل border-width
- صفحه بعدی box-decoration-break
تعریف و استفاده
ویژگی bottom لبه پایینی عنصر را مشخص می‌کند. این ویژگی تعیین می‌کند که لبه پایینی مارژین بیرونی عنصر قرار دارد و لبه پایینی محتویات آن با لبه پایینی محتویات عنصر والد.
نکته:اگر مقدار ویژگی position "static" باشد، تنظیم ویژگی bottom هیچ اثری نخواهد داشت.
توضیح
برای عنصر‌های static، مقدار auto خواهد بود؛ برای مقادیر طولی، مقدار طولی مربوطه؛ برای مقادیر درصدی، مقدار مشخص شده؛ در غیر این صورت auto خواهد بود.
برای عنصر‌های تعریف شده به صورت نسبی، اگر bottom و top هر دو auto باشند، مقدار محاسبه شده هر دو 0 خواهد بود؛ اگر یکی از آن‌ها auto باشد، مقدار آن معکوس مقدار دیگری خواهد بود؛ اگر هر دو نه auto باشند، bottom مقدار معکوس top را خواهد گرفت.
لطفاً به اینجا نیز مراجعه کنید:
آموزش CSS:تصادفی CSS
دستورالعمل مرجع HTML DOM:ویژگی bottom
مثال
لبه پایینی تصویر را در 5 پیکسل بالاتر از لبه پایینی عنصر نگه دارید:
img
{
position:absolute;
bottom:5px;
}
جمله‌بندی CSS
bottom: auto|length|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش‌فرض. موقعیت پایینی با استفاده از مرورگر محاسبه می‌شود. |
| % | با استفاده از درصد، موقعیت پایینی لبه را تنظیم کنید. می‌توان از مقادیر منفی استفاده کرد. |
| length | با استفاده از واحد‌هایی مانند px، cm و غیره، موقعیت پایینی عنصر را تنظیم کنید. می‌توان از مقادیر منفی استفاده کرد. |
| inherit | این ویژگی باید از ارزش bottom از عنصر والد خود ارث ببرد. |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| ارث‌برداری: | no |
| نسخه: | CSS2 |
| جمله‌بندی JavaScript: | object.style.bottom="50px" |
مثالهای بیشتر
- تنظیم لبه پائینی تصویر با استفاده از واحد پیکسل
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از واحد پیکسل، لبه پائینی تصویر را تنظیم کرد.
- تنظیم لبه پائینی تصویر با استفاده از درصد
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از درصد، لبه پائینی تصویر را تنظیم کرد.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی است.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- صفحه قبل border-width
- صفحه بعدی box-decoration-break
