آموزش CSSآموزش طراحی سایت

جلسه ۱۹ – margin در CSS

آشنایی با فاصله خارجی یا Margin

منظور از 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، می‌تونیم فاصله عنصر مورد نظرمون از هر سمت رو به صورت مجزا تعیین کنیم.

به مثال زیر توجه کنین:

نتیجه مثال CSS Margin
نتیجه مثال CSS Margin

نتیجه فوق رو توسط کد زیر به وجود میاریم:

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;
}

توسط کد بالا، فاصله عنصر از طرف بالا ۲۰ پیکسل، طرف راست ۱۵ پیکسل، طرف پایین ۳۴ پیکسل و طرف چپ ۱۳ پیکسل خواهد بود.

در صورت مبهم بودن مثال ها، حتما سوالتون رو تو قسمت نظرات پایگاه دانش میزفا مطرح کنین، پاسخگو خواهم بود 🙂

پایان ترم

سوال:

برای چه عناصری نمی‌تونیم از خاصیت های margin-top و margin-bottom استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

نتیجه گیری

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

همچنین دیدیم که این حرکت دادن می‌تونه هم توسط خاصیت های مجزا، و هم خاصیت کوتاه شده margin صورت بگیره.

امیدوارم که این مقاله براتون مفید بوده باشه 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر