خصائص CSS padding-inline-end

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

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

العنصر padding-inline-end يعني المسافة من حافة العنصر إلى محتواه في الاتجاه الخطي.

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

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

النتيجة

مثال

مثال 1

div {
  تعيين الهوامش في نهاية الاتجاه الخطي:
}

جرب بنفسك

padding-inline-end: 50px;

يرجى الرجوع إلى كيفية تعيين خاصية <div> إلى rtl. مثال 2 نحوية الكتابة

div {
  عندما يتم تعيين قيمة الخاصية إلى vertical-rl، يكون الاتجاه الخطي نحو الأسفل. النتيجة هي أن موقف نهاية العنصر يتحرك من اليمين إلى الأسفل:
  padding-inline-end: 100px;
}

جرب بنفسك

مثال 3

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

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

جرب بنفسك

نحوية CSS

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

قيمة الخاصية

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

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

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