آموزش margin در css

 استفاده از ویژگی margin در css

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

main-block1.

{

;margin-top:10px

;margin-buttom:20px

}

با نوشتن این کد بلاک div با کلاس main-block  از تگ body  از حاشیه بالای صفحه نمایش و حاشیه پایین صفحه نمایش فاصله به مقداری که مشخص شده ایجاد می کند.

مقدارهای مربوط به اندازه های حاشیه را می توان به چندین صورت مشخص کرد، اما  بهترین ومناسب ترین و متداول ترین روش در حالت عادی، تعیین مقادیر برحسب پیکسل (px) می باشد. که در زیر کامل شرح داده خواهد شد

• و در واقع تعیین مقادیر بر حسب پیکسل ماندد 10px و… پیکسل ها مقدارهای ثابتی هستند،و از واحد px اکثرا برای نمایش اطلاعات در صفحه مانیتور استفاده می شود.
• مشخص کردن مقادیر برحسب Points، به فرض 10pt و… (هر pt برابر است با 1/72 اینچ ) و در واقع واحد pt اکثرا برای کارهای چاپی استفاده می شود.
• تعیین مقادیر margin با Ems، به فرض 1em، 0.5em و… ( و هر em برابر است با 16 پیکسل و همچنین 12 pt ) و این واحددر برای طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
• مشخص کردن مقادیر به سانتی متر مانند  10cm و… استفاده از این شیوه در وب، چندان مرسوم نیست.
• مشخص کردن مقادیر به درصد مانند %10  و…  این واحد اندازه گیری نیز در طراحی صفحات وب برای گوشی های تلفن همراه و  همچنین دستگاه های مانند آن استفاده می شود.
• مشخص کردن مقادیر به صورت اتوماتیک و حالت ارث بری(inherit).

 تعریف ویژگی margin

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