منظور از margin در css چیست ؟ چگونگی استفاده از دستور margin در css را توضیح دهید! در این مقاله قصد داریم تا کار با margin در Css را بیاموزیم.
سرفصلهای پست
ویژگی margin در CSS
در این جلسه از دوره css ، دومین توع از کادرهای غیرقابل مشاهده یا margin رو با هم یاد میگیریم.
مفهوم margin، به شکل زیر تعریف میشه:
margin، چیزی نیست جز فاصله ای که یک عنصر، از عناصر اطرافش داره.
برای درک بهتر موضوع، به شکل زیر توجه کنید:
برای تعریف کردن صفت margin برای عنصر مورد نظرمون، کافیه از خاصیت های مربوطه به margin استفاده کنیم.
خاصیت های مربوط به margin در CSS
این خاصیت ها، عبارتند از:
- margin: فاصله عنصر ما از تمام جهات (خاصیت کوتاه شده یا shorthand property)
- margin-left: فاصله عنصر ما از عنصر سمت چپ
- margin-right: فاصله عنصر از عنصر سمت راست
- margin-bottom: فاصله عنصر از عنصر سمت پایین
- margin-top: فاصله عنصر از عنصر سمت بالا
مقادیر مناسبی که میتونیم به این خاصیت ها اختصاص بدیم، طبق جدول زیر مشخص میشن:
شرح | مقدار |
مرورگر حاشیه ی دور عناصر / margin را خودکار محاسبه و اندازه گیری میکند. | auto |
حاشیه ی یک عنصر از عنصر / margin دیگر را بر حسب واحدهای(پیکسل) px , (نقطه) pt , cm , و غیره تعیین میکند . مقدار پیش فرض 0px میباشد. |
length |
حاشیه ی دور عنصر را به میزان درصد پهنای المان دربرگیرنده مشخص می کند / فاصله ی دور عنصر را بر حسب درصد تعیین شده, برابر با کل عرض یا پهنای المان دربرگیرنده تعیین میکند. |
% |
تعیین میکند که حاشیه ی دور عنصر باید از عنصر والد / parent element به ارث برده شود. | inherit |
نکته: بر خلاف padding، ما میتونیم به margin مقدار منفی هم اختصاص بدیم. در این حالت، عنصری که با مقدار مثبت از یک سمت فاصله میگرفت، با مقدار منفی به اون سمت نزدیک میشه.
تنظیم فاصله از هر سمت به صورت مجزا
توسط خاصیت های margin-left، margin-right، margin-top و margin-bottom، میتونیم فاصله عنصر مورد نظرمون از هر سمت رو به صورت مجزا تعیین کنیم.
به مثال زیر توجه کنین:
نتیجه فوق رو توسط کد زیر به وجود میاریم:
div{ margin-left: 50px; margin-top: 60px; }
کد بالا، فاصله عنصر div از سمت چپ (حاشیه های صفحه دسکتاپ) ۵۰ پیکسل و از سمت بالا، ۶۰ پیکسل تعیین کرده.
تنظیم فاصله عنصر از اطراف توسط خاصیت کوتاه شده margin
در بخش قبل، دیدیم که میتونیم برای فاصله عنصرمون از هر سمت، یک خاصیت جداگونه بنویسیم.
حالا چطور میتونیم فاصله از تمامی طرف ها رو، فقط در یک خاصیت بگنجونیم؟
برای این امر، کافیه از خاصیت margin استفاده کنیم. این خاصیت، میتونه به چهار شکل مختلف عمل کنه.
حالت پیشفرض:
در این حالت، به margin، فقط یک مقدار اختصاص میدیم. اون مقدار، عنصر رو از تمامی طرف ها به یک اندازه فاصله میده:
/* --- استفاده از یک خاصیت --- */ div{ margin: 20px; } /* --- استفاده از چند خاصیت --- */ div{ margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; }
کد های بالا، عنصر مورد نظر رو به اندازه ۲۰ پیکسل از تمام طرف ها فاصله میده.
مقدار دو گانه:
در حالت دوم، به مارجین ، دو مقدار اختصاص میدیم.
به ترتیب زیر برای نوشتن مقدار ها توجه کنین:
margin: [فاصله جپ و راست] [فاصله بالا و پایین];
به مثال زیر برای درک بهتر توجه کنین:
/* --- استفاده از یک خاصیت --- */ div{ margin: 20px 40px; } /* --- استفاده از چند خاصیت --- */ div{ margin-left: 40px; margin-right: 40px; margin-top: 20px; margin-bottom: 20px; }
با توجه به کد بالا، عنصر از طرف های بالا و پایین به اندازه ۲۰ پیکسل، و از طرف های چپ و راست به اندازه ۴۰ پیکسل فاصله خواهد داشت.
مقدار سه گانه:
در حالت سوم، خاصیت margin، سه مقدار قبول میکنه.
این سه مقدار، با ترتیب زیر نوشته میشن:
margin:[فاصله پایین] [فاصله جپ و راست] [فاصله بالا];
به مثال زیر دقت کنین:
/* --- استفاده از یک خاصیت --- */ div{ margin: 20px 50px 5px; } /* --- استفاده از چند خاصیت --- */ div{ margin-left: 50px; margin-right: 50px; margin-top: 20px; margin-bottom: 5px; }
کد فوق، فاصله عنصر از طرف بالا رو ۲۰ پیکسل، طرف پایین ۵ پیکسل و طرف های چپ و راست رو ۵۰ پیکسل قرار میده.
مقدار چهار گانه:
در حالت آخر، میتونیم تمامی فواصل عنصر از طرف ها رو به صورت متفاوت و برای هر چهار طرف وارد کنیم.
ترتیب این حالت به شکل زیر خواهد بود:
margin: [فاصله چپ] [فاصله پایین] [فاصله راست] [فاصله بالا];
به مثال زیر توجه کنین:
/* --- استفاده از یک خاصیت --- */ div{ margin: 20px 15px 34px 13px; } /* --- استفاده از چند خاصیت --- */ div{ margin-left: 13px; margin-right: 15px; margin-top: 20px; margin-bottom: 34px; }
توسط کد بالا، فاصله عنصر از طرف بالا ۲۰ پیکسل، طرف راست ۱۵ پیکسل، طرف پایین ۳۴ پیکسل و طرف چپ ۱۳ پیکسل خواهد بود.
در صورت مبهم بودن مثال ها، حتما سوالتون رو تو قسمت نظرات پایگاه دانش میزفا مطرح کنین، پاسخگو خواهم بود 🙂
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
برای چه عناصری نمیتونیم از خاصیت های margin-top و margin-bottom استفاده کنیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تو این مقاله با مفهوم margin آشنا شدیم، و دیدیم که چطور میتونیم عناصرمون رو در صفحه وب، با کمک خاصیت های margin حرکت بدیم. پس به طور کلی آموزش کار با ویژگی margin در CSS را آموختیم و توانستیم به درج فاصله از بیرون بپردازیم.
همچنین دیدیم که این حرکت دادن میتونه هم توسط خاصیت های مجزا، و هم خاصیت کوتاه شده margin صورت بگیره.
امیدوارم که این مقاله براتون مفید بوده باشه 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
10 پاسخ
سلام ، با تشکر فراوان
ما نمی تونیم به عناصر inline
خصوصیات margin-top و margin-bottom رو اعمال کنیم.
کاملا درسته، نیاز داریم حداقل به عنصرمون inline-block یا block و دیگر ویژگی هارو بدیم. ممنون از پاسختون 🙂
سلام روزتون بخیر
من فرمی رو نوشتم که قراره در برنامه ای خاص اجرا شه. مقدار مارجین بالا و پایین را دادم و راست و چپ را اوتو قرار دادم تا فرمم وسط صفحه قرار بگیره وقتی با مرورگر بازش میکنم اوکیه اما وقتی وارد برنامه میشه از راست و چپ فیت صفحست.
بار دیگه برای بالا راست پایین چپ مارجین دادم اما اینبار فقط بالا و چپ درست شد اما از سمت راست فیته و سایز اینپوت ها رو تغییر داده.
ممنون میشم اگر راهنمایی بفرمایید که چکار کنم 🙏
سلام شهره. خب باید نتیجه کد ها و خودت کد هایی که نوشتی رو ببینیم که بتونیم کمکت کنیم. لطفا یه زیپ شامل عکس از نتیجه و کد هات رو (فقط قسمتی که به این استایل دهی ها مربوطه) رو اپلود کن که بررسی کنیم🌹
راجب مارجین اتو هم توضیح بدین
سلام احمدرضا. چشم حتما. در نزدیک ترین فرصت راجبش آموزش کامل تری میزاریم🙂
سلام
مرورگر ها ویژگی margin-top و margin-bottom برای عناصر inline در نظر نمیگیرن
سلام حسین، دقیقا. ما نمیتونیم به عناصر inline خصوصیات margin-top و margin-bottom رو اختصاص بدیم. ممنون ازت🙂
در پاسخ به سوالی که پرسیده بودین میخواستم بگم که عناصر “inline” هستن که خاصیت margin-top و margin-bottom رو پشتیبانی نمیکنن. 😊😁
ابوالفضل عزیز اکانتت شارژ شد.
ممنونم از وقتی که گذاشتی