جلسه ۱۹ – margin در CSS

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

آشنایی با 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;
}

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

10 نظر

10 پاسخ

  1. سلام ، با تشکر فراوان
    ما نمی تونیم به عناصر inline
    خصوصیات margin-top و margin-bottom رو اعمال کنیم.

    1. کاملا درسته، نیاز داریم حداقل به عنصرمون inline-block یا block و دیگر ویژگی هارو بدیم. ممنون از پاسختون 🙂

  2. سلام روزتون بخیر
    من فرمی رو نوشتم که قراره در برنامه ای خاص اجرا شه. مقدار مارجین بالا و پایین را دادم و راست و چپ را اوتو قرار دادم تا فرمم وسط صفحه قرار بگیره وقتی با مرورگر بازش میکنم اوکیه اما وقتی وارد برنامه میشه از راست و چپ فیت صفحست.
    بار دیگه برای بالا راست پایین چپ مارجین دادم اما اینبار فقط بالا و چپ درست شد اما از سمت راست فیته و سایز اینپوت ها رو تغییر داده.
    ممنون میشم اگر راهنمایی بفرمایید که چکار کنم ?

    1. سلام شهره. خب باید نتیجه کد ها و خودت کد هایی که نوشتی رو ببینیم که بتونیم کمکت کنیم. لطفا یه زیپ شامل عکس از نتیجه و کد هات رو (فقط قسمتی که به این استایل دهی ها مربوطه) رو اپلود کن که بررسی کنیم?

    1. سلام احمدرضا. چشم حتما. در نزدیک ترین فرصت راجبش آموزش کامل تری میزاریم?

  3. سلام
    مرورگر ها ویژگی margin-top و margin-bottom برای عناصر inline در نظر نمیگیرن

    1. سلام حسین، دقیقا. ما نمیتونیم به عناصر inline خصوصیات margin-top و margin-bottom رو اختصاص بدیم. ممنون ازت?

  4. در پاسخ به سوالی که پرسیده بودین میخواستم بگم که عناصر “inline” هستن که خاصیت margin-top و margin-bottom رو پشتیبانی نمیکنن. ??

    1. ابوالفضل عزیز اکانتت شارژ شد.
      ممنونم از وقتی که گذاشتی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=