سلام خسته نباشی خدمت شما دوستان عزیز امیدوارم که شاد باشید و از اموزش ما استفاده لازم را ببرید.همانطور که میدانید خاصیت های مربوط به Margin فضای اطراف المان ها را تعریف می کند .
Margin در حقیقت ناحیه ی اطراف یک عنصر را در بر می گیرد . حاشیه ی دور عنصر (margin) فاقد رنگ پس زمینه بوده و کاملاً شفاف (transparent) می باشد .
Margin جهات چهارگانه (حاشیه ی دور عناصر در چهار جهت راست, چپ, بالا و پایین) را می توان به صورت تکی و جداگانه اصلاح کرد (و یا هر چهار طرف را با استفاده از خاصیت مختصر نویسی margin (short-hand property) یکجا و همزمان تغییر داد .
مقادیر ممکن ( (Possible Values
شرح
مقدار
مرورگر حاشیه ی دور عناصر / margin را خودکار محاسبه و اندازه گیری می کند
auto
حاشیه ی یک عنصر از عنصر / margin دیگر را بر حسب واحدهای (پیکسل) px, (نقطه) pt, cm, و غیره تعیین می کند . مقدار پیش فرض ۰px می باشد
length
حاشیه ی دور عنصر را به میزان درصد پهنای المان دربرگیرنده مشخص می کند / فاصله ی دور عنصر را بر حسب درصد تعیین شده, برابر با کل عرض یا پهنای المان دربرگیرنده تعیین می کند
%
تعیین می کند که حاشیه ی دور عنصر باید از عنصر والد / parent element به ارث برده شود
inherit
آموزش Cssنکته:
این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .
این امکان نیز وجود دارد با استفاده از مقادیر منفی کاری کرد که محتوا یا عناصر تا حدی روی هم قرار بگیرند (همپوشانی یا overlap رخ دهد) .
تعیین margin ی متفاوت برای هر چهار طرف (تعیین میزان حاشیه ی دور عناصر به صورت مجزا در هر طرف)
در CSS این امکان وجود دارد که ویژه ی هر چهار جهت, حاشیه دور عنصر متفاوتی تنظیم کرد :
آموزش Css مثال:
?
۱
۲
۳
۴
۵
۶
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
مقدار دهی margin هر چهار جهت در یک تعریف
به منظور بهینه نویسی کد در CSS و کاهش اندازه ی آن, می توان تمامی خصوصیت های margin (حاشیه ی دور عناصر در هر چهار طرف) را در تنها یک خاصیت یا یک property واحد, تعیین کرد . به این روش مقداردهی shorthand property می گویند .
خاصیت مختصر نویسی (shorthand property) برای مقداردهی هر چهار جهت, همان خاصیت “margin” می باشد .
آموزش Css مثال:
?
۱
۲
۳
p {
margin: 100px 50px;
}
خاصیت margin می تواند یک تا چهار مقدار داشته باشد :
?
۱
۲
۳
۴
۵
margin: 25px 50px 75px 100px;
۲۵ px حاشیه ی دور عنصر سمت بالا
۵۰ px میزان حاشیه ی دور عنصر سمت راست
۷۵ px حاشیه ی دور عنصر سمت پایین
۷۵ px حاشیه ی دور عنصر سمت چپ نیز
?
۱
margin: 25px 50px 75px;
?
۱
۲
۳
۲۵px حاشیه ی دور المان سمت بالا
۵۰px حاشیه ی دور عنصر سمت راست و چپ
۷۵px حاشیه ی سمت پایین
?
۱
margin: 25px 50px;
?
۱
۲۵px حاشیه ی دور عنصر هر چهار طرف
شرح
خاصیت
را در یک تعریف مقداردهی می کند((حاشیه ی دور عنصر margin تمامی خصوصیت های
margin
میزان حاشیه ی دور عنصر سمت پایین را تنظیم می کند
margin-bottom
سمت چپ المان را تعیین می کند Margin
margin-left
میزان حاشیه عنصر سمت راست را تنظیم می کند
margin-right
سمت بالای عنصر را تنظیم می کندMargin
margin-top
