ویژگی padding-inline CSS

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

عنصر padding-inline به معنای فضایی است که در جهت خطی از لبه تا محتوای آن وجود دارد. این یک شورت‌کر برای ویژگی‌های زیر است:

• padding-inline-start
• padding-inline-end

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

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

padding-inline: 10px 50px;

• مجال پادری شروعی 10px است
• مجال پادری انتهای 50px است

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

padding-inline: 10px;

• پادینگ آغازین و انتهایی به اندازه 10px هستند

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

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

مثال

مثال 1

پادینگ در دو طرف جهت درجه خطی تنظیم می‌شود:

div {
  padding-inline: 50px;
}

تست شخصی بکنید

مثال 2

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

div {
  writing-mode: vertical-rl;
  padding-inline: 10px 100px;
}

تست شخصی بکنید

مثال 3

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

div {
  direction: rtl;
  padding-inline: 10px 100px;
}

تست شخصی بکنید

نوع نوشتار CSS

padding-inline: auto|value|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

ارجاع:ویژگی direction CSS

ارجاع:ویژگی padding-inline-end CSS

ارجاع:ویژگی padding-inline-start CSS

ارجاع:ویژگی padding-bottom CSS

ارجاع:ویژگی padding-left CSS

ارجاع:ویژگی padding-right CSS

ارجاع:ویژگی padding-top CSS

ارجاع:ویژگی writing-mode CSS