خصائص CSS padding-inline

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

عنصر 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 و اتجاه يحدد الاتجاه السطرية. هذا يؤثر على موقع البداية والنهاية للعنصر في الاتجاه السطرية، وكذلك padding-inline نتيجة الخاصية. للصفحات باللغة الإنجليزية، الاتجاه الكتفي يكون نحو الأسفل، واتجاه السطرية يكون من اليسار إلى اليمين.

مثال

مثال 1

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

div {
  padding-inline: 50px;
}

جرب بنفسك

مثال 2

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

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

جرب بنفسك

مثال 3

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

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

جرب بنفسك

جافا سكربت لغة CSS

padding-inline: auto|القيمة|القيمة الافتراضية|وراثي;

قيمة الخاصية

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم الخاصية بشكل كامل لأول مرة.

الصفحات ذات الصلة

الإشارة:خصائص direction CSS

الإشارة:خصائص CSS padding-inline-end

الإشارة:خصائص CSS padding-inline-start

الإشارة:خصائص CSS padding-bottom

الإشارة:خصائص CSS padding-left

الإشارة:خصائص CSS padding-right

الإشارة:خصائص CSS padding-top

الإشارة:خصائص writing-mode CSS