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;

مقدار ویژگی

مقدار	توضیح
آوتو	مقدار پیش‌فرض. مقدار پیش‌فرض margin-inline عنصر.
length	مقدار margin-inline را به صورت px،pt،cm و غیره تنظیم کنید. مقادیر منفی مجاز هستند. لطفاً به:سی ایس ایس یونٹ.
%	مقدار margin-inline به درصد از اندازه عنصر والد در جهت خط.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. لطفاً به: initial.
ارث‌پذیری	این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به: ارث‌پذیری.

جزئیات فنی

مقدار پیش‌فرض:	آوتو
ارث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
آموزش نحوی جاوااسکریپت:	object.style.marginInline="50px 10px"