CSS داخل-بلاک

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

inset-block عناصر تنظیمات ویژگی در فاصله بین عنصر والد در جهت بلوک.

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

inset-block ویژگی یک شorthand از ویژگی‌های زیر است:

• inset-block-start
• اینسیت-بلک-ایند

inset-block مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

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

inset-block: 10px 50px;

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

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

inset-block: 10px;

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

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

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

مثال

مثال 1

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

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

آزمایش کنید

مثال 2

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

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

آزمایش کنید

نویسی CSS

inset-block: خودکار|length|ابتدایی|ابداع;

مقدار ویژگی

جزئیات فنی

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

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

مربوط پیج

تعلیم:کیس پوزیشن

مطابقت:CSS position کا حصہ

مطابقت:CSS داخل-بلاک-پایان

مطابقت:CSS داخل-بلاک-شروع

مطابقت:کیس وریٹنگ-موڈ پروپریٹی