ویژگی CSS inset-inline-start

定义和用法

inset-inline-start تعریف و استفاده

توجه داشته باشید:ویژگی‌ها را تنظیم کنید تا فاصله ابتدای عنصر در جهت خط با عنصر والد خود مشخص شود. برای اینکه این ویژگی کار کند، باید ویژگی position

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

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

مثال

مثال 1

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

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

آزمایش کنید شخصاً

مثال 2

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

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

آزمایش کنید شخصاً

مثال 3

وقتی ویژگی <div>元素的 direction وقتی مقدار ویژگی به rtl تنظیم شود، جهت خط از راست به چپ خواهد بود. توضیحی که در اینجا وجود دارد یک اشتباه کوچک دارد، باید باشد: "结果是元素的起始端仍然保持在右侧（因为对于 rtl،起始端本就是右侧，只是相对于默认 ltr 布局来说，整个内容翻转了）"

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

آزمایش کنید شخصاً

جملات CSS

inset-inline-start: auto|length|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

آموزش:تعیین مکان CSS

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

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

ارجاع به:خصوصیت writing-mode CSS