CSS داخل-اینترن

تعریف اور استعمال

inset-inline نمایاں کو سیٹ کرنا چاہئے تاکہ وہ عناصر کو خاندان کی رکاوٹ سے دور رکھ سکے

توجه:اگر آپ اس نمائاں کو اپنائیں تو، وہ کار کردار کا حامل ہونا چاہئے پوزیشن نمایاں

inset-inline نمایاں اسی کی مختصر نمائش ہیں:

• inset-inline-start
• inset-inline-end

inset-inline نمایاں کی اقدار مختلف طریقوں سے سیٹ کی جاسکتی ہیں:

اگر inset-inline اپنے اپ کی دو اقدار کا حامل ہو:

inset-inline: 10px 50px;

• شروع کی دوری 10px کی ہے
• مکمل کی دوری 50px کا ہے

اگر ویژگی inset-inline یک مقدار داشته باشد:

inset-inline: 10px;

• فاصله شروع و پایان عنصر هر دو 10px هستند

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

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

مثال

مثال 1

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

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

آزمایش کنید

مثال 2

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

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

آزمایش کنید

مثال 3

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

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

آزمایش کنید

آموزش CSS:

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

آموزش:CSS قرارگیری

مراجعه:CSS position کا حصہ

مراجعه:CSS ڈائریکشن اپریٹر

مراجعه:CSS حالت نویسی属性