خصائص الحاشية العمودية البداية CSS

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

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

margin-inline-start يحدد الخصائص الوسائط الموجودة داخل السطر البداية الخارجية للحجب.

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

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

مثال

مثال 1

تحديد الهوامش عند بداية الاتجاه الداخلي:

div {
  margin-inline-start: 35px;
}

جرب بنفسك

مثال 2

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

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

جرب بنفسك

مثال 3

عندما يتم تعيين خاصية <div> الخاصة به: direction عندما يتم تعيين قيمة الخاصية 'rtl'، فإن اتجاه الصف هو من اليمين إلى اليسار. النتيجة هي أن نقطة البداية للعنصر تظل من اليسار في الواقع تطبق الهوامش، ولكن بسبب الاتجاه من اليمين إلى اليسار، فإن تأثير التخطيط سيكون مختلفًا:

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

جرب بنفسك

نحوية CSS

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

قيمة الخاصية

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

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

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