ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، ابتدا باید وارد حساب کاربری خود شوید.

آموزش css – قسمت هفتم(Margin)

سلام

با هفتمین قسمت از آموزش css در خدمتتون هستیم، در جلسه قبل پرداختیم به Border(حاشیه)، حال در این قسمت می پردازیم به مفهوم خاصیت Margin در css، خاصیت Margin یکی از خاصیت های مهم css به حساب می آید، در ادامه همراه بپرسم باشید.

آموزش:

از margin برای تعیین اندازه اطراف عنصر(تگ) استفاده می شود، توسط margin می توانیم فضای بالا، راست، چپ و راست یک عنصر نسبت به دیگر عنصرها را تعیین نمود.

  • خواص margin

خواصی که margin میگیرد برای تعیین فاصله ی عناصر:

  1. margin-right
  2. margin-top
  3. margin-left
  4. margin-bottom

در زیر مثالی از margin را برایتان آورده ایم:

در کدهای بالا به جای margin خصوصیت padding را بنویسید و خروجی را نگاه کنید، تا فرق بین دو خاصیت padding و margin را درک کنید.

نتیجه:

margin

margin

همانطور که در کدها مشاهده کردید، margin-right, margin-left, margin-bottom, margin-top به تگ div دادیم، و تگ div از چهار طرف با توجه به مقادیری که دادیم فاصله گرفته است.

  • خلاصه نویسی در margin
حتما بخوانید:  آموزش تار کردن عکس در فتوشاپ

در margin هم مثل خصوصیت هایی مثل border می توانیم تمام خاصیت های margin-left, margin-right, margin-top, margin-bottom را در یک خط و همه آن ها را به خصوصیت margin بدیم، به مثال زیر توجه کنید:

این مثال همان مثال قبلی است، با این تفاوت که خلاصه نویسی کردیم.

نکته: نیاز نیست که تمام خصوصیت ها را مقدار دهی کنیم، بلکه با توجه به نیاز می توانیم مقدار هر خاصیت را که نیاز داشته باشیم بدیم.

خصوصیت margin می تواند از یک تا چهار مقدار بگیرد:

۱٫ خصوصیت margin با ۴ مقدار:

margin: 25px 50px 75px 100px

از سمت بالا ۲۵px

از سمت راست ۵۰px

از سمت پایین ۷۵px

از سمت چپ ۱۰۰px

۲٫ خصوصیت margin با سه مقدار:

margin: 25px 50px 75px

از سمت بالا ۲۵px

از سمت راست و چپ ۵۰px

از سمت پایین ۷۵px

۳٫ خصوصیت margin با دو مقدار:

margin: 25px 50px

از سمت بالا و پایین ۲۵px

از سمت راست و چپ ۵۰px

۴٫ خصوصیت margin با یک مقدار:

margin: 25px

از چهار طرف، ۲۵px

توجه: به جای px نیز میتوانید از % و cm استفاده کنید(یک مثال حل کنید تا متوجه تفاوت px, %, cm شوید).

  • خصوصیت های margin
حتما بخوانید:  آموزش تغییر آواتار پیشفرض در وردپرس

در جدول زیر تمام خصوصیات margin را به همراه مثال و توضیح آورده ایم:

خصوصیت

توضیح

مثال

margin

مقدار دهی تمام جهات(راست،چپ،بالا،پایین)

margin: 25px 75px 65px 10px

margin-right

فاصله سمت راست را تعیین میکند

margin-right: 10px

margin-left

فاصله سمت چپ را تعیین میکند

margin-left: 30px

margin-top

فاصله سمت بالا را تعیین میکند

margin-top: 55px

margin-bottom

فاصله سمت پایین را تعیین میکند

margin-bottom: 71px

آموزش margin در css نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.

موفق باشید.


درباره SOLTANE GHALBHAمدیر

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

دنبال کردن من

نظر شما چیست؟