margin چیست و مارجین auto چه کاربردی دارد؟

ساعت : ۱۷:۱۲

تاریخ : ۸ بهمن ۱۳۹۷

margin چیست؟

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

استایل دهی inline

درسته که گفتیم مارجین چهار ویژگی رو به صورت خلاصه برای ما بیان می کنه ولی نگفتیم که مارجین حتما باید ۴ مقدار داشته باشه. در حقیقت ویژگی مارجین می تونه ۴ ،۳ ، ۲ و حتی یک مقدار داشته باشه.

مارجین auto

وقتی margin یک مقدار داشته باشه:
این مقدار فاصله ی عنصر ما رو از هر چهار طرف مشخص میکنه.

وقتی margin دو مقدار داشته باشه:
مقدار اول مربوط به بالا و پایین عنصر میشه و مقدار دوم مربوط به سمت چپ و راست عنصر هست.

وقتی margin سه مقدار داشته باشه:
مقدار اول مربوط به بالای عنصر، مقدار دوم هم مربوط به سمت چپ و راست عنصر میشه و مقدار سوم هم فاصله ی المان مارو از پایین با سایر المان ها مشخص میکنه .

وقتی margin چهار مقدار داشته باشه:
در اسن صورت مقادیر داده شده به ترتیب مربوط به بالا ، راست ، پایین و سمت چپ المان ما میشن و فاصله هارو مشخص میکنن.

مارجین auto چیست؟

ویژگی مارجین می تونه مقادیر و آرگومان های مختلفی بگیره. برای مثال می تونه مقادیر رو به صورت طولی (با واحدهای مختلف)، درصدی و یا اینکه به صورت خودکار فاصله رو تنظیم کنه. تنظیم کردن خودکار فاصله همون کاری هستش که مارجین auto برای ما انجام میده. ولی این تنظیم خودکار چجوری انجام میشه؟ در واقع مارجین auto میاد و فاصله عنصر شما رو از دو سمت یا از هر چهار سمت به صورت مساوی در نظر می گیره و عنصر رو در مرکز قرار میده. برای درک بهتر موضوع به مثال های زیر توجه کنید:

margin چیست؟

margin : auto باعث میشه تا عنصر هم به صورت افقی و هم به صورت عمودی در مرکز اون بلوک قرار بگیره.

margin: 10px auto این کد میگه که فاصله عنصر مورد نظر از بالا و پایین ۱۰ پیکسل باشه ولی از چپ و راست فاصله یکسانی داشته باشه و عنصر در مرکز قرار بگیره.

margin:10px auto 50px این کد میگه که عنصر مورد نظر از بالا ۱۰ پیکسل و از پایین ۵۰ پیکسل فاصله داشته باشه. تو اینجا هم مثل مورد قبلی عنصر باید فاصله یکسانی از سمت چپ و راست داشته باشه.

نکات مهم در استفاده از مارجین auto

وقتی که قصد دارید از مارجین auto استفاده کنید، اول باید به این نکته توجه کنید که فقط زمانی که عنصر مورد نظرتون از نوع block هست و width اون مقدار ثابتی هست، می تونید از auto استفاده کنید و اون عنصر رو در مرکز قرار بدید. در غیر این صورت مارجین auto عمل نمی کنه. وقتی از مارجین auto استفاده می کنید، مرورگر سعی می کنه عنصر رو تا حد امکان به یک سمت بکشه. بنابراین وقتی که دو تا از ۴ مقدار هم جهت مارجین (چپ و راست یا بالا و پایین) مقدار خودکار رو بگیرند، از دو طرف نیروی یکسانی به عنصر وارد می کنند و باعث میشن عنصر در مرکز قرار بگیره.



  • margin چیست و مارجین auto چه کاربردی دارد؟
    نام نویسنده : امیرمسعود طالاری
  • margin چیست و مارجین auto چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده
  • margin چیست و مارجین auto چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده
  • margin چیست و مارجین auto چه کاربردی دارد؟
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *