آموزش Margin در CSS

آموزش Margin

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

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

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

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

این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا 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  حاشیه ی دور عنصر هر چهار طرف