ویژگی CSS inset-inline

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

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

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

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

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

مثال

مثال 1

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

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

آزمایش کنید

مثال 2

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

آموزش زبان CSS

inset-inline: auto|طول|مقدار اولیه|ارث‌پذیری;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

آموزش:محل‌یابی CSS

منبع:ویژگی position CSS

منبع:ویژگی direction CSS

منبع:ویژگی writing-mode CSS