ویژگی CSS inset-inline-end

تعریف و استفاده

inset-inline-end ویژگی را تنظیم کنید تا فاصله انتهای عنصر در جهت خط با عنصر والد مشخص شود.

توجه:برای اینکه این ویژگی کار کند، باید position ویژگی

CSS inset-inline و inset-block ویژگی‌ها با ویژگی‌های CSS top،bottom،left و right به طور مشابه است، اما inset-block و inset-inline ویژگی وابسته به جهت بلوک و جهت خط است.

توجه:ویژگی‌های CSS مرتبط writing-mode و جهت جهت خط را تعریف می‌کند. این تأثیرگذار بر موقعیت انتهای عنصر در جهت خط است و inset-inline-end نتیجه ویژگی. برای صفحات انگلیسی، جهت خط از چپ به راست است و جهت بلوک به پایین است.

مثال

مثال 1

فاصله انتهای عنصر <div> تعیین شده در جهت خط با عنصر والد تنظیم شود:

div {
  inset-inline-end: 50px;
}

آزمایش کنید

مثال 2

وقتی مقدار <div> به: writing-mode وقتی مقدار ویژگی به vertical-rl تنظیم شود، جهت خط به پایین است. نتیجه این است که انتهای عنصر از سمت راست به پایین حرکت می‌کند:

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

آزمایش کنید

مثال 3

وقتی مقدار <div> به: جهت وقتی مقدار ویژگی به rtl تنظیم شود، جهت خط از راست به چپ است. نتیجه این است که انتهای عنصر از سمت راست به سمت چپ حرکت می‌کند:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

آزمایش کنید

قانون CSS

inset-inline-end: auto|طول|ابتدایی|وارث;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

آموزش:تصادم CSS

ارجاع به:ویژگی position CSS

ارجاع به:ویژگی direction CSS

ارجاع به:ویژگی writing-mode CSS