CSS margin-block کا حصہ

پچھلے پیج مارگن
پائیدہ پیج margin-block-end

تعریف اور استعمال

margin-block یہ پرزنٹیشن کی کسی بلاک سمت میں شروع اور ختم کی حاشیے کا مظور رکھتا ہے، یہ درج ذیل پرزنٹیشنوں کا مختصر نام ہے:

margin-block-start
margin-block-end

margin-block کیا کچھ اعداد کا استعمال کیا جاسکتا ہے:

اگر margin-block پر دو اعداد موجود ہیں:

margin-block: 10px 50px;

بائن کا اضافی کافی پیمائش 10px ہے
مارژین در مرزهای پایان به 50px تنظیم شده است

اگر مارژین-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 نیز بر اثر مارژین-block تأثیر می‌گذارد:

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

آزمایش کنید

جملات CSS

margin-block: auto|طول|مقدار پیش‌فرض|انتقال;

مقدار ویژگی

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

جزئیات فنی

مقدار پیش‌فرض:	آوتو
انتقال:	خیر
انیمیشن ساخت:	پشتیبانی شده است. لطفاً مراجعه کنید:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
جملات برنامه‌نویسی جاوااسکریپت:	object.style.marginBlock="50px 20px"