شبكة تعلم مع ناو

ما هي الخاصية margin-block-start في CSS؟

الخاصية margin-block-start تعمل مثل margin-top في الكتابة الأفقية العادية: هامش في بداية العنصر في اتجاه تدفق الكتل.

p { margin-block-start: 16px; }  /* like margin-top: 16px */

ما الفرق إذن؟

هذه خاصية منطقية (Logical Property) تتبع اتجاه الكتابة بدل الجهات الثابتة. في الكتابة العمودية مثلًا، تصبح البداية جهة أخرى تلقائيًا.

الأهم للمواقع العربية: inline

.card {
  margin-inline-start: 16px;  /* right in RTL, left in LTR */
  padding-inline: 12px;       /* both sides */
}

مع margin-inline-start لا تحتاج تعديل CSS عند تحويل الموقع من الإنجليزية إلى العربية، فالاتجاه ينقلب وحده.

اختبر نفسك

خمسة أسئلة سريعة، مع الإجابة والشرح بعد كل سؤال.