خصائص padding-inline-start CSS

الصفحة السابقة padding-inline-end
الصفحة التالية padding-left

التعريف والاستخدام

العنصر padding-inline-start الخاصية تشير إلى المسافة من الحافة إلى المحتوى في بداية الاتجاه الداخلي.

CSS padding-inline و padding-block خصائص CSS padding-top،padding-bottom،padding-left و padding-right مماثلة جدًا، لكن padding-inline و padding-block الخاصية تعتمد على الاتجاه الداخلي والاتجاه الكبير.

ملاحظة:خصائص CSS ذات الصلة وضع الكتابة و اتجاه يحدد الاتجاه الداخلي. يؤثر ذلك على موقع البداية والنهاية للعنصر في الاتجاه الداخلي، وكذلك padding-inline-start نتيجة الخاصية. للصفحات باللغة الإنجليزية، الاتجاه الكبير هو نازل، الاتجاه الداخلي للسطر هو من اليسار إلى اليمين.

مثال

مثال 1

ضبط الهوامش في الاتجاه الداخلي للسطر:

div {
  padding-inline-start: 50px;
}

جرب بنفسك

مثال 2

تعيين خاصية <div> إلى وضع الكتابة عندما يتم تعيين قيمة الخاصية إلى vertical-rl، الاتجاه الداخلي للسطر يكون نازلاً. النتيجة هي أن موقع البداية للعنصر يتحرك من اليسار إلى الأعلى:

div {
  وضع الكتابة: vertical-rl;
  padding-inline-start: 100px;
}

جرب بنفسك

مثال 3

تعيين خاصية <div> إلى اتجاه عندما يتم تعيين قيمة الخاصية إلى rtl، الاتجاه الداخلي للسطر يكون من اليمين إلى اليسار. النتيجة هي أن موقع البداية للعنصر يتحرك من اليسار إلى اليمين:

div {
  اتجاه: rtl;
  padding-inline-start: 100px;
}

جرب بنفسك

جافا سكربت:

padding-inline-start: تلقائي|قيمة|مبدئي|تنسيق;

قيمة الخاصية

القيمة	الوصف
تلقائي	افتراضي. المسافة الافتراضية للpadding-inline-start للعنصر.
طول	تحديد المسافة باستخدام وحدات مثل px،pt،cm وما إلى ذلك. لا يسمح بالقيم السلبية. انظر إلى:وحدات CSS.
%	تحديد المسافة بنسبة إلى حجم الأب في الاتجاه الداخلي للسطر.
مبدئي	ضع هذا الخاصية في قيمتها الافتراضية. انظر إلى: مبدئي.
تنسيق	من خلال تنسيق الأب. انظر إلى: تنسيق.

تفاصيل التقنية

القيمة الافتراضية:	تلقائي
التنسيق:	لا
صنع التحرك:	يدعم. انظر إلى:خصائص التحرك.
الإصدار:	CSS3
جافا سكربت:	object.style.paddingInlineStart="100px"