مشاهده تصویر بزرگتر

ویژگی margin در css

ویژگی margin در css | ویژگی margin در css | خاصیت margin | صفت margin

در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی -margin- در زبان CSS می پردازیم.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

margin باعث می شود تا بتوانیم بین عنصر و اطرافش فاصله ایجاد کنیم.

مثلا اگر نیاز داریم تا لبه سمت راست عنصر با هرآنچه که در سمت راست آن است ۱۰۰ پیکسل فاصله داشته باشد کافی است از margin استفاده کنیم.

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

این ویژگی می تواند یک، دو، سه و یا چهار مقدار داشته باشد. که حالت های مختلف به شرح زیر می باشند:

زمانی که چهار مقدار دارد مقادیر در جهت عقربه های ساعت می توانند به خاطر سپرده شوند.

اولین مقدار سمت بالا و آخرین مقدار سمت چپ مانند مثال زیر:

margin: 10px 20px 10px 0;
margin: top right bottom left;

1 2	margin: 10px 20px 10px 0; margin: top right bottom left;

زمانی که سه مقدار وجود دارد مقدار اول بالا، مقدار دوم مربوط به سمت راست و چپ و مقدار سوم مربوط به پایین باشد مانند مثال زیر:

margin: 10px 10px 20px;
margin: top left/right bottom;

1 2	margin: 10px 10px 20px; margin: top left/right bottom;

در حالتی که دو مقدار وجود دارد مقدار اول مربوط به بالا و پایین و مقدار دوم مربوط به سمت راست و چپ می باشد مانند مثال زیر :

margin: 10px auto;
margin: top/bottom left/right;

1 2	margin: 10px auto; margin: top/bottom left/right;

و در آخر زمانی که یک مقدار برای ویژگی margin در css تعیین می کنیم، این مقدار مربوط به چهار سمت عنصر خواهد بود مانند مثال زیر :

margin: 10px;
margin: top/bottom/left/right;

1 2	margin: 10px; margin: top/bottom/left/right;

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

margin: 100px;
margin: 4rem;
margin: 10vh;
margin: 100cm;

margin: 100px;

margin: 4rem;

margin: 10vh;

margin: 100cm;

مقدار اولیه این ویژگی ۰ است به این معنی که هیچ فاصله خارجی به صورت پیشفرض برای عنصر وجود ندارد.

مقدار درصدی مارجین در css

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.

.dad .boy {
margin: 10%;
}

.dad .boy {

margin: 10%;

}

auto

این مقدار به مرورگر اجازه می دهد تا بصورت خودکار فاصله را تنظیم کند. معمولا از این مقدار برای این که عنصر را در مرکز قرار بدهیم استفاده می کنیم. که البته این موضوع نکاتی دارد.

توجه داشته باشیم در حالت عادی (زمانی که عنصر از نوع بلاک است) فقط عنصری که width آن مقدار ثابتی باشد می تواند در وسط قرار بگیرد.

width: 150px;
margin: 10px auto 0;

1 2	width: 150px; margin: 10px auto 0;

در این مثال فاصله خارجی عنصر از بالا ۱۰ پیکسل و از پایین برابر صفر است

و مقدار auto برای سمت چپ و راست بصورت زیر عمل می کند:

همیشه در خاطر داشته باشید زمانی که از auto برای این ویژگی استفاده می کنیم این کلمه کلیدی باعث می شود تا عنصر تا جایی که امکان دارد به یک سمت حول داده شود. مثلا اگر برای سمت راست عنصر این مقدار را تعیین می کنیم عنصر تا جایی که امکان دارد به سمت چپ حول داده می شود.