ویژگی CSS inset-block

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

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

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

inset-block ویژگی یک شورت‌کر برای موارد زیر است:

• inset-block-start
• inset-block-end

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: auto|length|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

آموزش:تصادم CSS

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

منبع:ویژگی CSS inset-block-end

منبع:ویژگی CSS inset-block-start

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