صفت Margin در CSS
این صفت یا خاصیت فضای اطراف عناصر را تعریف می کند . اگر مقدار منفی داشته باشد باعث روی هم افتادن حاشیه می شود. با این صفت می توان حاشیه بالا ، پایین ، راست و چپ را مستقل از جداکننده تغییر داد. صفتmargin نیز مانند بقیه صفتها یا خواص CSS دارای ویژگیهای دیگری می باشد که در ادامه به طور کامل برای شما توضیح میدهم اما خود Margin یک صفت تند نویس می باشد که می توانید تمام ویژگیها را یکجا وارد کنید .
به طور کلی صفت Margin سه مقدار را می پذیرد :
Auto : مرورگر به طور خودکار حاشیه گذاری می کند.
lenght : اندازه حاضیه با یک مقدار ثابت تعیین می گردد.
% : اندازه حاشیه با درصدی از اندازه قالب تعیین می گردد.
اگر نخواهید از صفت تند نویس margin استفاده کنید می توانید دقیق مشخص نمایید که فاصله از چه طرفی اعمال شود به عنوان مثال فرض کنید می خواهید پاراگراف اول 20پیکسل از پاراگراف پایین یا دوم فاصله داشته باشد .
به این مثال توجه کنید هر 4 حالت را توضیح داده ام
{
margin-bottom:50px;
}
.margin2
{
margin-left:50%;
}
.margin3
{
margin-right:auto;
}
.margin4
{
margin-top:50px;
}
مشاهده دمو
نیازی هم حتما نیست که 4 طرف را در فایل CSS مشخص کنید می توانید از خاصیت تند نویس استفاده کنید که فقط اعداد را روبروی صفت تایپ می کنید .
به مثال زیر توجه کنید .
هر 4 جهت را به صورت خلاصه وارد کردم دیگه نیازی نیست از خواص طرفین استفاده کنم .
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin:25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin:25px;
all four margins are 25px
مثال
.margin1
{
margin:25px 50px 75px 100px;
}
.margin2
{
margin:25px 50px 75px;
}
.margin3
{
margin:25px 50px;
}
.margin4
{
margin:25px;
}