آموزش CSS – حاشیه خارجی یا Margin در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با مدل جعبه ای CSS آشنا شدید. در این بخش قصد داریم شما را با حاشیه خارجی یا Margin در CSS آشنا کنیم.

در واقع Margin ناحیه ای در اطراف border است که آن را از سایر جعبه ها جدا می سازد.

خصوصیت Margin در CSS :

خصوصیت Margin در CSS به شما اجازه می دهد فضایی را در اطراف کناره های جعبه المان تعریف نمایید. معمولا Margin رنگ پس زمینه ندارد و کاملا شفاف است.

آموزش CSS - حاشیه خارجی یا Margin در CSS

تنظیم Margin برای هر کدام از کناره ها:

شما می توانید به راحتی Margin های متفاوتی برای کناره های هر المان همچون بالا، راست، پایین یا چپ تعیین کنید.

خصوصیت مختصرنویسی شده Margin:

خصوصیت Margin یک خصوصیت مختصر نویسی شده دارد که از تنظیم Margin برای هر طرف به صورت جداگانه جلوگیری می کند:

margin-top, margin-right, margin-bottom and margin-left

این خصوصیت مختصر نویسی می تواند یک، دو، سه یا چهار مقدار داشته باشد:

  • اگر یک مقدار تنظیم شده باشد، این خصوصیت بر روی هر چهار طرف اعمال می شود.
  • اگر دو مقدار تنظیم شده باشد، مقدار اول به بالا و پایین و مقدار دوم به سمت راست و چپ اعمال می گردد.
  • اگر دو مقدار تنظیم شده باشد و مقدار دوم که مربوط به راست و چپ را auto قرار دهید, المان در وسط صفحه قرار می گیرد
  • اگر سه مقدار مشخص شده باشد، مقدار اول به بالا، مقدار دوم به سمت راست و چپ و مقدار سوم به انتها اعمال می گردد.
  • اگر چهار مقدار تنظیم شده باشد، به بالا، راست، پایین و سمت چپ به ترتیب مشخص شده اعمال خواهد شد.

 

امیدوارم در این بخش آموزش CSS, از حاشیه خارجی یا Margin در CSS نهایت استفاده را برده باشید.

در بخش بعدی با حاشیه داخلی با padding در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link