جلسه 11 آموزش CSS: فاصله خارجی (Margin) در CSS

جلسه 11 آموزش CSS: فاصله خارجی (Margin) در CSS

🖐️سلام سلام حالت چطوره؟ امیدوارم امروز یه روز خاص برات باشه😻 امروز اومدم با یه مقاله خفن دیگه از سری مقالات آموزش‌ CSS رایا وردپرس، این جلسه می‌خوام باهات در مورد : فاصله خارجی (Margin) صحبت کنم. 😉

می‌دونی چقدر مهمه که عناصر توی صفحه وب سایتت یه کم از همدیگه فاصله داشته باشن و به هم نچسبن! 🤔 توی CSS ما از یه چیزی به اسم فاصله خارجی (Margin) استفاده می‌کنیم تا بین عناصر HTML فاصله ایجاد کنیم.

فاصله خارجی در واقع فضاییه که اطراف یه عنصر ایجاد می‌شه، یعنی بیرون از حاشیه (Border) اون عنصر. تو با استفاده از مارجین می‌تونی تعیین کنی که یه عنصر از بالا، پایین، چپ و راست چقدر با عناصر دیگه فاصله داشته باشه. جالبه نه؟ 😉

×

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

🤔 فاصله خارجی (Margin) چیه؟

بیا بریم سراغ اصل مطلب. فاصله خارجی تو CSS همون فضاییه که بیرون از مرز یه المان قرار می‌گیره. فکر کن داری یه پارکینگ می‌سازی و می‌خوای بین جای پارک هر خودرو و ماشین کناریش یه فضای خالی باشه. این فضای خالی همون Margin هست! 🚗 هدفش اینه که المان‌ها رو از هم جدا کنه و یه نظم قشنگ به صفحه‌ات بده. حالا بریم ببینیم چطور می‌تونی ازش استفاده کنی. 😊

🤔چطور فاصله خارجی رو به المان‌ها اضافه کنیم؟

برای اینکه به المان‌هات فاصله خارجی بدی، از خاصیت margin توی CSS استفاده کن. این خاصیت خیلی انعطاف‌پذیره و می‌تونی به شکل‌های مختلف به کارش ببری. بذار برات چند مدلش رو توضیح بدم:

1️⃣ حالت ساده و یکسان:

×

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه

ساده‌ترین حالت استفاده از خاصیت margin به صورت زیره:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در این حالت باکس ما از همه طرف (بالا، پایین، چپ، راست) 10 پیکسل فاصله خارجی میگیره.

2️⃣ بالا-پایین و چپ-راست جدا :

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در این حالت، 10 پیکسل برای بالا و پایین و 20 پیکسل برای چپ و راست فاصله خارجی ایجاد کردی.

×

جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

مطالعه

3️⃣ هر جهت جداگانه:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

می‌توانی برای هر طرف، مارجین جداگانه تعریف کنی در مثال فوق برای بالا 10 پیکسل، راست 20 پیکسل، پایین 15 پیکسل و چپ باکس 25 پیکسل مارجین در نظر گرفته شده.

نکته میتونی کد بالا رو به صورت خلاصه و کوتاه شده بنویسی تا کدت تمیزتر باشه یعنی به اینصورت :

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

توجه! ترتیب مقادیر مهمه و در جهت عقربه های ساعته! یعنی اول مقدار بالا بعد راست، پایین و سپس چپ

نکته عجیب اما مهم: Margin Collapsing چیه؟

حالا که با نحوه استفاده از فاصله خارجی آشنا شدی، یه نکته جالب و مهم رو بهت بگم که ممکنه اولش گیج‌کننده باشه. بهش می‌گن Margin Collapsing یا همون “ادغام فاصله خارجی“. شاید بگی این چیه؟ 🤔 بذار توضیح بدم:

×

جلسه 13 آموزش CSS: باکس مدل (Box Model) در CSS

مطالعه

فرض کن دو تا المان داری که به صورت عمودی پشت سر همن. اولی یه margin-bottom: 20px; داره و دومی یه margin-top: 30px;. شاید با خودت بگی فاصله بینشون 50 پیکسل می‌شه؟ در کمال تعجب اما نه! توی CSS، وقتی دو تا Margin عمودی به هم می‌رسن، جمع نمی‌شن؛ بلکه بزرگ‌ترینشون انتخاب می‌شه. پس اینجا فاصله بین این دو المان 30 پیکسل می‌شه، نه 50 پیکسل! عجیب اما واقعی! 🤯 این قانون فقط برای جهت‌های عمودی (بالا و پایین) صدق می‌کنه، نه چپ و راست.

🤔فرق Margin با Padding چیه؟

شاید الان بگی: “صبر کن! این Margin که گفتی خیلی شبیه Padding هست!” درسته که شبیه‌ان، ولی یه فرق بزرگ دارن. بذار برات روشن کنم:

• Padding: فضای داخلیه. یعنی فاصله بین محتوای المان و مرز خود المان. مثلاً اگه یه جعبه داری، Padding فضای بین وسایل داخل جعبه و دیواره‌هاشه.
• Margin: فضای خارجه. یعنی فاصله بیرون از مرز المان با المان‌های دیگه. مثل فاصله جعبه‌ات با جعبه‌های کناریش.

پس اگه می‌خوای داخل المانت بین اون و دیواره اش یه فاصله باشه، از Padding استفاده کن. ولی اگه می‌خوای المانت از بقیه فاصله بگیره، از Margin کمک بگیر 🙂

×

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه

واحدهای مختلف برای فاصله خارجی

یه چیز باحالم بگم: Margin فقط با پیکسل کار نمی‌کنه! می‌تونی از واحدهای دیگه هم استفاده کنی، مثل:

• px (پیکسل): مقدار ثابت، مثلاً 10px.
• % (درصد): نسبت به اندازه المان والد تنظیم می‌شه.
• em: نسبت به اندازه فونت المان خودت.
• rem: نسبت به اندازه فونت ریشه (root).

مثلاً اگه بخوای فاصله خارجی‌ات با اندازه صفحه تغییر کنه، می‌تونی بگی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

اینطوری فاصله‌ات همیشه 5 درصد از عرض والدش می‌شه. انتخاب واحد بستگی به طراحی‌ات داره!

نکات مهم درباره Margin یا فاصله خارجی در CSS

1. مقدار منفی برای Margin: فاصله خارجی برخلاف پدینگ یا فاصله داخلی می‌تونه مقدار منفی بگیره، مثلاً margin: -10px;. این کار باعث می‌شه المان به سمت بیرون کشیده بشه و با المان‌های دیگه هم‌پوشانی پیدا کنه. برای طراحی‌های خلاقانه یا افکت‌های خاص خیلی کاربرد داره.
2. ادغام فاصله خارجی (Margin Collapsing): وقتی دو المان پشت سر هم باشن و Margin عمودی (بالا یا پایین) داشته باشن، این فاصله‌ها جمع نمی‌شن؛ بلکه بزرگ‌ترین Margin بینشون اعمال می‌شه. مثلاً اگه margin-bottom: 20px; و margin-top: 30px; باشه، فاصله نهایی 30 پیکسل می‌شه، نه 50 پیکسل. این فقط برای جهت عمودی صدق می‌کنه.
3. Margin و المان‌های inline: المان‌های inline مثل <span> یا <a> به طور پیش‌فرض Margin بالا و پایین رو نادیده می‌گیرن. برای اینکه Margin عمودی کار کنه، باید display رو به inline-block یا block تغییر بدی.

جمع‌ بندی

خب دوست من، حالا که با فاصله خارجی یا Margin توی CSS آشنا شدی، دیگه می‌تونی طراحی‌های تمیز و مرتب‌تری داشته باشی. یادت باشه Margin برای تنظیم فضای بیرون المان‌هاست و با Padding که فضای داخلیه فرق داره. با تمرین و استفاده درست از این خاصیت، صفحه‌های وبت رو مثل یه نقاشی حرفه‌ای می‌کنی!

هر وقت خواستی فاصله المان‌هات رو تنظیم کنی، فقط به این فکر کن: “می‌خوام بیرونشون چقدر فاصله داشته باشه؟” و بعد Margin رو به کار ببر. به همین سادگی!

×

جلسه 3 آموزش CSS: کامنت گذاری در CSS

مطالعه

اگه سوالی داری یا چیزی رو نفهمیدی، حتماً توی کامنت‌ها برام بنویس. خوشحال می‌شم کمکت کنم! 😊 و اگه این جلسه برات مفید بود، به دوستاتم بگو بیان و با هم یاد بگیریم. طراحی وب رو با فاصله خارجی قشنگ‌تر کن و به سمت حرفه‌ای شدن برو! 🚀

تا جلسه بعدی، مواظب خودت باش و موفق باشی! 👋

×

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه