درس پنجم
خصوصیت Margin در css
با کمک خصوصیت Margin می توان فضای کنار عناصر را حذف کرده و از این طریق فضای بیرون از Border یا لبه ها را تعیین نمود. این خصوصیت بدون رنگ و شفاف می باشد.
این امکان وجود دارد که فضای بالا، راست، پایین و چپ یک عنصر به طور مستقل تعیین شوند. برای مختصر نویسی می توان از خصوصیت Margin استفاده نمود.
خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:
(px, pt, em) فاصله حاشیه های ثابت را تعریف خواهد کرد.
% درصدی از عنصر برای حاشیه را در نظر می گیرد.
تنظیم حاشیه ها، به صورت جداگانه
مثال زیر دقت کنید در این مثال مقدار حاشیه های بالا و پایین پیکسل و مقدار حاشیه راست و چپ ۵۰ پیکسل در نظر گرفته شده است.
مثال :
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
مختصر نویسی با کمک margin
برای مختصر نویسی و کوتاه کردن کدها می توان تمامی چهار حاشیه عنصر را در یک خصوصیت تعریف نمود. برای این کار می‌توان از خصوصیت margin استفاده کرد.
به مثال زیر توجه کنید:
margin:100px 50px;
خصوصیت Margin می تواند مقادیری از ۱ تا ۴ داشته باشد.
margin:25px 50px 75px 100px;
در این مثال:
حاشیه بالا ۲۵ پیکسل
حاشیه راست ۵۰ پیکسل
حاشیه پایین ۷۵ پیکسل
حاشیه چپ ۱۰۰ پیکسل
مثال:
margin:25px 50px 75px;
حاشیه بالا ۲۵ پیکسل
حاشیه راست و چپ ۵۰ پیکسل
حاشیه پایین ۷۵ پیکسل
مثال:
margin:25px 50px;
حاشیه بالا و پایین ۲۵ پیکسل
حاشیه راست و چپ ۵۰ پیکسل
مثال:
margin:25px;
حاشیه بالا، راست، پایین و چپ ۲۵ پیکسل
نکته:
حاشیه بالای یک متن را می توان با استفاده از مقدار CM تنظیم کرد.
با کمک درصد می توان حاشیه پایین یک پاراگراف است فضایی که در آن قرار گرفته تنظیم کرد.
ویژگی ها و خصوصیات حاشیه
حاشیه های اطراف یک عنصر با استفاده از خصوصیت margin به شکل مختصر مشخص می شوند.
margin-right حاشیه راست یک عنصر را مشخص می کند.
margin-left حاشیه چپ یک عنصر را مشخص می کند.
margin-top حاشیه بالای یک عنصر را مشخص می کند.
margin-bottom حاشیه پایین یک عنصر را مشخص می کند.