روتینہ تعلیمی

سی اس اس مراجع دستورالعمل

CSS کی خصوصیات

اختیاری کورس

کورس کی سفارش:

کدوو۳سی.کم ڈاگ‌باگ

CSS padding-inline کی خاصیت

پچھلے پیج پیدنگ-بوتوم
پیچھلے پیج پیدنگ-این‌درلاین-انڈ

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

عنصر کا padding-inline یعنی اس کی درون لائن سمت میں، فریم سے مطلب تک کی فاصلہ ہے۔ یہ درج ذیل اپریشنوں کا چھوت چھاتا ہے:

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-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|مقدار|مقدار اولیه|وراثت;

مقدار ویژگی

مقدار	توضیح
자동	پیش‌فرض. فاصله پیش‌فرض padding-inline عنصر.
طول	فاصله را با واحد‌های px،pt،cm و غیره مشخص کنید. مقدار منفی مجاز نیست. لطفاً به:واحدهای سی اس اس.
%	فاصله را به عنوان درصد از اندازه درجهان درونی عنصر والد مشخص کنید.
مقدار اولیه	این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مقدار اولیه.
وراثت	این ویژگی از عنصر والد خود ارث می‌برد. به: وراثت.

جزئیات فنی

مقدار پیش‌فرض:	자동
وراثت:	خیر
انیمیشن‌سازی:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
نویسی جاوااسکریپت:	object.style.paddingInline="100px 20px"