خاصیت Margin یا مارجین توی css جزو پر کاربرد ترین خاصیت هاست .

Margin میتونه باعث بشه که المنت موردنظر ما از عنصر مادر خودش ( از چهار طرف ) چقدر فاصله داشته باشه ...

برای مثال وقتی ما برای یک ID یا Class تعیین می کنیم مثلا margin:5px یعنی اون المنت با این ID یا Class باید به میزان 5 پیکسل از چهار طرف خودش یعنی چپ ، راست ، بالا ، پایین فاصله داشته باشه .

خاصیت مارجین چهارتا ورودی میگیره که به شرح پایین هست :


margin:top right bottom left;

توجه کنید که ترتیب مقادیر دقیقا به صورت بالاست یعنی اگه خاصتید فواصل رو تعیین کنید ترتیبش به صورت بالاست همیشه .
نکته دیگر این هست که خاصیت margin فاصله عنصر رو از عنصر مادر خودش تعیین میکنه و تاثیری در طول و عرض و ارتفاع خود عنصر و عنصر مادرش نداره . ( بر عکس خاصیت padding که میتونه تاثیر داشته باشه .)
اونجایی که نوشتم top مقدار پیکسلی که میخواید المنت از سمت بالا از عنصر مادرش فاصله بگیره رو می نویسید .
مثلا 7px یا ...
اونجایی که نوشتم right هم میزان فاصله ای که می خواید عنصر از مادرش از سمت راست داشته باشه رو می نویسید . مثلا 20px

bottom ( پایین ) و left ( چپ ) هم همینطور هستند .

حالا چندتا نکته داره که باید دونسته باشید : 

1 : اگر هر چهارتا مقدارتون مساوی بودند ( مثلا top و left و right و bottom همه مساوی بودن با 4px ) به جای اینکه برای تک تک شون بنویسید 4px یه بار که 4px رو بنویسید برای هر چهارتا مقدار اعمال میشه مثل زیر : 

margin:4px 4px 4px 4px;   =  margin:4px;


2 : اگر دو مقدار اولتون ( یعنی top و right ) یا دو مقدار دومتون ( bottom و left ) با هم برابر بودند اینطور نوشته میشه :

margin:4px 4px 6px 7px; = margin:4px 6px 7px;

margin:9px 3px 10px 10px; = margin:9px 3px 10px;


3 : اگر دو مقدار اول و دو مقدار دوم دو به دو با هم برابر هم بودند میشه مثل زیر : 

margin:10px 10px 6px 6px; = margin:10px 6px;


4 : شما می تونید سه مقدار اول رو بنویسید و مقدار آخر یعنی چپ رو ننویسید . این طوری مقادیر به ترتیب زیر از چپ به راست حساب می شوند . که البته زیاد کاربرد نداره ...

بالا ، چپ ، پایین

باتشکر
اطلاعات مطلب
نویسنده :

admin

❤️ امتیازات این مطلب : 0
تعداد بازدید : 28
ارسال شده در تاریخ سه شنبه 28 ارديبهشت 1395 و ساعت 8:24
دسترسی بیشتر (ابزارهای مطلب)
نوع فونت متن :
اندازه فونت متن : (اندازه متن)
رنگ متن : (مقدار هگزادسیمال رنگ)

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