مشخصات مقاله
-
4383
-
5.0
-
8536
-
1
-
1
آموزش Margin در CSS
آموزش Margin
خاصیت های مربوط به Margin فضای اطراف المان ها را تعریف می کند .
Margin در حقیقت ناحیه ی اطراف یک عنصر را در بر می گیرد . حاشیه ی دور عنصر (margin) فاقد رنگ پس زمینه بوده و کاملاً شفاف (transparent) می باشد .
Margin جهات چهارگانه (حاشیه ی دور عناصر در چهار جهت راست, چپ, بالا و پایین) را می توان به صورت تکی و جداگانه اصلاح کرد (و یا هر چهار طرف را با استفاده از خاصیت مختصر نویسی margin (short-hand property) یکجا و همزمان تغییر داد .
مقادیر ممکن ( (Possible Values
این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .
این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .
تعیین margin ی متفاوت برای هر چهار طرف (تعیین میزان حاشیه ی دور عناصر به صورت مجزا در هر طرف)
در CSS این امکان وجود دارد که ویژه ی هر چهار جهت, حاشیه دور عنصر متفاوتی تنظیم کرد :
مثال:نمونه یک
1 2 3 4 5 6 | p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px;}<button></button> |
مقدار دهی margin هر چهار جهت در یک تعریف
به منظور بهینه نویسی کد در CSS و کاهش اندازه ی آن, می توان تمامی خصوصیت های margin (حاشیه ی دور عناصر در هر چهار طرف) را در تنها یک خاصیت یا یک property واحد, تعیین کرد . به این روش مقداردهی shorthand property می گویند .
خاصیت مختصر نویسی (shorthand property) برای مقداردهی هر چهار جهت, همان خاصیت "margin" می باشد .
مثال:خاصیت margin می تواند یک تا چهار مقدار داشته باشد :
1 2 3 4 5 6 | margin: 25px 50px 75px 100px; 25 px حاشیه ی دور عنصر سمت بالا 50 px میزان حاشیه ی دور عنصر سمت راست 75 px حاشیه ی دور عنصر سمت پایین 75 px حاشیه ی دور عنصر سمت چپ نیز <button></button> |
1 2 | margin: 25px 50px 75px; <button></button> |
1 2 3 4 | 25px حاشیه ی دور المان سمت بالا 50px حاشیه ی دور عنصر سمت راست و چپ 75px حاشیه ی سمت پایین<button></button> |
1 2 | margin: 25px 50px;<button></button> |
1 2 | 25px حاشیه ی دور عنصر هر چهار طرف<button></button> |