خصائص الحجم الأدنى للكتلة لـ CSS

الصفحة السابقة @media
الصفحة التالية min-inline-size

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

min-block-size يحدد الخاصية الحجم الأدنى للعنصر في الاتجاه العمودي.

إذا كان حجم المحتوى في اتجاه الكتلة أصغر من الحجم الأدنى، فسيتم تطبيقها min-block-size قيمة الخاصية.

إذا كان حجم المحتوى في اتجاه الكتلة أكبر من الحجم الأدنى، min-block-size قيمة الخاصية لا تنجح.

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

CSS min-block-size خصائص CSS min-height و min-width مماثلة جدًا، لكن min-block-size الخاصية تعتمد على اتجاه الكتلة.

مثال

مثال 1

تعيين أقل حجم للعنصر <div> إلى 200 بكسل:

div {
  min-block-size: 200px;
}

تجربة شخصية

مثال 2: نمط الكتابة

تعيين <div> الخاصية writing-mode عندما يتم تعيين قيمة الخاصية إلى vertical-rl، يتغير اتجاه الكتلة من أسفل إلى الجانب، مما يؤثر على min-block-size طريقة عمل الخاصية:

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

تجربة شخصية

مثال 3: min-block-size و block-size

مراقبة عنصر <div> (block-size 100px) و عنصر <div> آخر (min-block-size ملاحظة رد الفعل المختلف عند تغيير حجم المحتوى (100px):

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

تجربة شخصية

جملة CSS

min-block-size: auto|length|initial|inherit;

قيمة الخاصية

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

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

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