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

آموزش Margin در CSS

دوره های مرتبط با این مقاله

آموزش Margin

خاصیت های مربوط به Margin فضای اطراف المان ها را تعریف می کند .

Margin در حقیقت ناحیه ی اطراف یک عنصر را در بر می گیرد . حاشیه ی دور عنصر (margin) فاقد رنگ پس زمینه بوده و کاملاً شفاف (transparent) می باشد .

Margin جهات چهارگانه (حاشیه ی دور عناصر در چهار جهت راست, چپ, بالا و پایین) را می توان به صورت تکی و جداگانه اصلاح کرد (و یا هر چهار طرف را با استفاده از خاصیت مختصر نویسی margin (short-hand property) یکجا و همزمان تغییر داد .

مقادیر ممکن ( (Possible Values

شرح
مقدار
مرورگر حاشیه ی دور عناصر / margin را خودکار محاسبه و اندازه گیری می کند
auto
حاشیه ی یک عنصر از عنصر / margin دیگر را بر حسب واحدهای (پیکسل) px, (نقطه) pt, cm, و غیره تعیین می کند . مقدار پیش فرض 0px می باشد
length
حاشیه ی دور عنصر را به میزان درصد پهنای المان دربرگیرنده مشخص می کند / فاصله ی دور عنصر را بر حسب درصد تعیین شده, برابر با کل عرض یا پهنای المان دربرگیرنده تعیین می کند
%
تعیین می کند که حاشیه ی دور عنصر باید از عنصر والد / parent element به ارث برده شود
inherit
نکته:

این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .

این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .

تعیین margin ی متفاوت برای هر چهار طرف (تعیین میزان حاشیه ی دور عناصر به صورت مجزا در هر طرف)

در CSS این امکان وجود دارد که ویژه ی هر چهار جهت, حاشیه دور عنصر متفاوتی تنظیم کرد :

مثال:

نمونه یک

        p {
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 150px;
            margin-left: 50px;
        }
امتحان کنید

مقدار دهی margin هر چهار جهت در یک تعریف

به منظور بهینه نویسی کد در CSS و کاهش اندازه ی آن, می توان تمامی خصوصیت های margin (حاشیه ی دور عناصر در هر چهار طرف) را در تنها یک خاصیت یا یک property واحد, تعیین کرد . به این روش مقداردهی shorthand property می گویند .

خاصیت مختصر نویسی (shorthand property) برای مقداردهی هر چهار جهت, همان خاصیت "margin" می باشد .

مثال:

نمونه دو

        p {
            margin: 100px 50px;
        }
امتحان کنید

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

           margin: 25px 50px 75px 100px;
                       25  px حاشیه ی دور عنصر سمت بالا 
                       50 px میزان حاشیه ی دور عنصر سمت راست
                       75  px  حاشیه ی دور عنصر سمت پایین
                       75 px  حاشیه ی دور عنصر سمت چپ نیز
                    
            margin: 25px 50px 75px;
                        
          25px    حاشیه ی دور المان سمت بالا
          50px حاشیه ی دور عنصر سمت راست و چپ
          75px  حاشیه ی سمت پایین
        
           margin: 25px 50px;
        
          25px  حاشیه ی دور عنصر هر چهار طرف
        
شرح
خاصیت
را در یک تعریف مقداردهی می کند((حاشیه ی دور عنصر margin تمامی خصوصیت های
margin
میزان حاشیه ی دور عنصر سمت پایین را تنظیم می کند
margin-bottom
سمت چپ المان را تعیین می کند Margin
margin-left
میزان حاشیه عنصر سمت راست را تنظیم می کند
margin-right
سمت بالای عنصر را تنظیم می کندMargin
margin-top
  • 3472
  •    2262
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .