ویژگی margin در CSS
ویژگی margin (لبه)، فضای خالی لبه بیرونی اطراف المان را مشخص می کند. این فضای خالی، لبه خارجی حاشیه (border) است.
margin: 50px;
margin: 0px;
نکته: ویژگی margin، فضای خالی در لبه ی خارجی حاشیه (border) ایجاد می کند.
نکته: ویژگی padding فضای خالی در لبه داخلی حاشیه (border) ایجاد می کند.
جهت های margin در CSS
margin: 5px;
ویژگی margin، در نمونه کد بالا، خلاصه ی چهار ویژگی است.
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
چیدمان افقی المان در margin
با استفاده از ویژگی margin، می توانید المان ها را در راست، مرکز و چپ قرار دهید. به عبارتی با استفاده از :
- ویژگی margin-right: auto; المان چپ چین
- ویژگی های margin-right: auto; margin-left: auto; المان وسط چین
- ویژگی margin-left: auto; المان راست چین می شود.
margin: auto;
توجه داشته باشید که برای تغییر چیدمان المان، با ویژگی margin باید:
- ویژگی display المان از نوع block باشد.
- عرض المان کوچک تر از عرض المان والد باشد.
خلاصه نویسی margin با یک مقدار
ویژگی margin را می توان به چند صورت خلاصه نویسی کرد.
ویژگی margin با یک مقدار:
margin: 50px;
- در چهار جهت به صورت یکسان اعمال می شود.
خلاصه نویسی margin با دو مقدار
ویژگی margin با دو مقدار:
margin: y x;
- مقدار اول در جهت بالا و پایین (محور y)
- مقدار دوم در جهت راست و چپ (محور x)
margin: 100px 200px;
خلاصه نویسی margin با سه مقدار
ویژگی margin با سه مقدار:
margin: top x bottom;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست و چپ (محور x)
- مقدار سوم در جهت پایین
margin: 200px 20px 50px;
خلاصه نویسی margin با چهار مقدار
ویژگی margin با چهار مقدار:
margin: top right bottom left;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست
- مقدار سوم در جهت پایین
- مقدار چهارم در جهت چپ
margin: 50px 100px 80px 50px;
خلاصه درس
در این درس با ویژگی margin در CSS:
- انواع مقداردهی
- خلاصه نویسی آن با مقدار های مختلف
آشنا شدیم.