ویژگی CSS margin-block

صفحه قبل مargins
صفحه بعدی margin-block-end

تعریف و استفاده

margin-block این ویژگی محدوده‌ی بیرونی لبه‌ی آغازین و پایان لبه‌ی یک مسیر بلوک را مشخص می‌کند و یک شorthand از موارد زیر است:

margin-block-start
margin-block-end

margin-block مقدار این ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر مقیاس margin-block دو مقدار داشته باشد:

margin-block: 10px 50px;

محدوده‌ی بیرونی لبه‌ی آغازین 10 پیکس است
حاشیه لبه پایان 50px است

اگر margin-block ویژگی یک مقدار داشته باشد:

margin-block: 10px;

حاشیه‌های شروع و پایان لبه‌ها هر دو 10px هستند

CSS margin-block و margin-inline ویژگی‌ها با CSS margin-top،margin-bottom،margin-left و margin-right به طور مشابه است، اما margin-block و margin-inline ویژگی‌ها بستگی به جهت بلوک و جهت خط دارند.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode تعریف می‌کند جهت بلوک. این اثرات بر موقعیت شروع و پایان بلوک و margin-block نتیجه ویژگی. برای صفحات انگلیسی، جهت بلوک به سمت پایین و جهت خط از چپ به راست است.

مثال

مثال 1

مقدار حاشیه‌های دو طرف در جهت بلوک را تنظیم می‌کند:

div {
  margin-block: 35px;
}

آزمایش کنید

مثال 2

وقتی علامت <div> عنصر: writing-mode وقتی مقدار ویژگی writing-mode به vertical-rl تنظیم شود، موقعیت شروع عنصر در جهت بلوک به سمت راست و موقعیت پایان عنصر به سمت چپ تغییر می‌کند. تغییرات writing-mode نیز تأثیراتی بر margin-block دارد:

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

آزمایش کنید

اسکریپت CSS

margin-block: auto|طول|initial|inherit;

مقدار ویژگی

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

جزئیات فنی

مقدار پیش‌فرض:	자동
وراثت:	خیر
انیمیشن‌سازی:	پشتیبانی می‌شود. لطفاً به:خصوصیات مرتبط با انیمیشن.
نسخه:	CSS3
اسکریپت جاوااسکریپت:	object.style.marginBlock="50px 20px"