آموزش margin در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی margin در CSS

ویژگی margin (لبه)، فضای خالی لبه بیرونی اطراف المان را مشخص می کند. این فضای خالی، لبه خارجی حاشیه (border) است.

این تگ از بالا، راست، پایین، چپ 50 پیکسل margin دارد.

margin: 50px;
margin: 0px;

نکته: ویژگی margin، فضای خالی در لبه ی خارجی حاشیه (border) ایجاد می کند.

نکته: ویژگی padding فضای خالی در لبه داخلی حاشیه (border) ایجاد می کند.

margin: 5px;

ویژگی margin، در نمونه کد بالا، خلاصه ی چهار ویژگی است.

margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;

با استفاده از ویژگی margin، می توانید المان ها را در راست، مرکز و چپ قرار دهید. به عبارتی با استفاده از :

margin: auto;

توجه داشته باشید که برای تغییر چیدمان المان، با ویژگی margin باید:

ویژگی margin را می توان به چند صورت خلاصه نویسی کرد.

ویژگی margin با یک مقدار:

 margin: 50px;

ویژگی margin با دو مقدار:

margin: y x;

margin: 100px 200px;

ویژگی margin با سه مقدار:

margin: top x bottom;

margin: 200px 20px 50px;

ویژگی margin با چهار مقدار:

margin: top right bottom left;

margin: 50px 100px 80px 50px;

در این درس با ویژگی margin در CSS:

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی