خصائص margin-block CSS

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

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

margin-block تحدد الخاصية الهوامش في اتجاه البلاك المحدد، وهي اختصار للعديد من الخاصيات التالية:

margin-block-start
margin-block-end

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

إذا كان لديسم margin-block قيمتان:

margin-block: 10px 50px;

الحد الخارجي للهوامش هو 10px
الهوامش الخارجية للنهاية هي 50px

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

margin-block: 10px;

الهوامش الخارجية للابتداء والنهاية للهوامش الخارجية هي 10px

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

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

مثال

مثال 1

تحديد الهوامش الخارجية للاتجاه البلوكي:

div {
  margin-block: 35px;
}

تجربة شخصية

مثال 2

عندما يكون writing-mode عندما يتم تعيين قيمة property إلى vertical-rl، يتم تحريك موقع البداية للعنصر في الاتجاه البلوكي من الأعلى إلى اليمين، يتم تحريك موقع النهاية للعنصر من الأسفل إلى اليسار. تأثير تغيير writing-mode أيضًا يؤثر على تأثير margin-block:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

تجربة شخصية

جملة CSS

margin-block: auto|length|initial|inherit;

قيمة الخصائص

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

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

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