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|ابتدایی|وراثت;

مقدار ویژگی

جزئیات فنی

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

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

مربوط پیج

تعلیم:CSS کی تازہ کاری

مطالبه:CSS position کا اپریشن

مطالبه:CSS ڈائریکشن پرپرٹی

مطالبه:CSS writing-mode کا لکھنا کا ماحول