خصائص padding-block CSS

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

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

عنصر padding-block هو المسافة بين الحافة إلى المحتوى في الاتجاه البلاكي، وهو اختصار للخصائص التالية:

padding-block يمكن تعيين قيمة الخاصية بطرق مختلفة:

يمكن تعيين قيمة الخاصية بطرق مختلفة:

padding-block: 10px 50px;

إذا كان لدي خاصية padding-block قيمتين:
الهوامش الداخلية في البداية تكون 10px

الهوامش الداخلية في النهاية تكون 50px

إذا كان لدي خاصية padding-block قيمة واحدة:

padding-block: 10px;

في المكان الأول والآخر، الهوامش الداخلية تكون 10px padding-block مثل padding-inline CSS خصائص وتعادل خصائصpadding-bottompadding-toppadding-bottom، مثل padding-left padding-right padding-block مثل padding-inline يعتمد الخاصية على اتجاه الكتلة واتجاه الصف.

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

مثال

مثال 1

ضبط الهوامش الداخلية لاتجاه الكتلة على الجانبين:

p {
  padding-block: 35px;
}

جرب بنفسك

مثال 2

عندما يكون writing-mode عندما يتم تعيين قيمة الخاصية padding-block إلى vertical-rl، يتحرك موقع البداية للعنصر من الأعلى إلى اليمين، وموقع النهاية من الأسفل إلى اليسار:

div {
  writing-mode: vertical-rl;
  padding-block: 10px 50px;
}

جرب بنفسك

نحوية CSS

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

قيمة الخاصية

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

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

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