CSS margin-inline الخاصية

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

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

margin-inline يحدد الخصائص المسافة الخارجية عند البداية والنهاية في اتجاه الخط، وهي اختصار لأحد الخصائص التالية:

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

إذا كان لـ margin-inline قيمتين:

margin-inline: 10px 50px;

المسافة الخارجية عند البداية 10px
المسافة الخارجية عند النهاية 50px

إذا كان لـ margin-inline قيمة:

margin-inline: 10px;

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

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

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

مثال

مثال 1

تعيين الهوامش على كلا الجانبين من اتجاه الصف:

div {
  margin-inline: 35px;
}

جرب بنفسك

مثال 2

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

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

جرب بنفسك

مثال 3

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

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

جرب بنفسك

جملة CSS

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

قيمة الخاصية

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

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

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