خاصیت margin در CSS

خاصیت Margin در CSS

Wiki

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

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

مقادیر ممکن:

خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:

نکته: مقدار حاشیه می تواند منفی باشد، که در این صورت روی هم افتادگی محتوا خواهیم داشت.

تنظیم حاشیه ها، به صورت جداگانه

Wiki

در مثال زیر، حاشیه بالا و پایین 100 پیکسل و حاشیه راست و چپ 50 پیکسل تعریف شده است:

مختصر نویسی - margin

Wiki

برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار حاشیه یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت Margin استفاده کنید:

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

1. margin:25px 50px 75px 100px;
   • حاشیه بالا 25 پیکسل
   • حاشیه راست 50 پیکسل
   • حاشیه پایین 75 پیکسل
   • حاشیه چپ 100 پیکسل
2. margin:25px 50px 75px;
   • حاشیه بالا 25 پیکسل
   • حاشیه راست و چپ 50 پیکسل
   • حاشیه پایین 75 پیکسل
3. margin:25px 50px;
   • حاشیه بالا و پایین 25 پیکسل
   • حاشیه راست و چپ 50 پیکسل
4. margin:25px;
   • حاشیه بالا، راست، پایین و چپ 25 پیکسل

مثال - خودتان امتحان کنید

Wiki

تنظیم حاشیه بالای یک پاراگراف با مقدار cm
این مثال نشان می دهد که چگونه حاشیه بالای یک متن را با استفاده از مقدار CM تنظیم کنیم.

تنظیم حاشیه پایین یک پاراگراف با درصد
این مثال نشان می دهد که چگونه حاشیه پایین یک پاراگراف را به نسبت فضایی که در آن قرار گرفته به درصد تنظیم کنیم.

کلیه خصوصیات مربوط به حاشیه:

Wiki