آموزش کامل کار با حاشیه خارجی MARGIN در CSS

حامد محمدیحامد محمدی
103 بازدید
آموزش کار با حاشیه خارجی margin

MARGIN یکی دیگر از عناصر در دسترس در css است. این ویژگی اجازه می دهد تا فاصله خارجی المان مورد نظر در صفحه وب سایت را با عناصر دیگر تنظیم کنید. در این پست، آموزش کامل کار با حاشیه خارجی MARGIN در CSS  در خدمت شما قرار داده می شود. بعداز مطالعه این پست شما قادر خواهیدبود تا فاصله عناصر صفحه از یکدیگر را بطور دلخواه تنظیم نمایید. با ما همراه باشید.

با سلام شما خدمت شما همراهان همیشگی سایت پرنیان طرح

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

 

margin

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

تصویر زیر به شما در درک بهتر ویژگی marginکمک می کند.

آموزش کار با margin در css

آموزش کار با margin در css

مقادیر ۵px نشان دهنده اندازه margin از لبه های صفحه از بالا هستند. و ۳px نشان دهنده اندازه margin از عنصر کناری است.

ویژگی های margin

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

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

شما میتوانید این مقادیر را با واحدهای em , px , pt و % ، و auto و همچنین  inherit مقداردهی کنید.

auto

تنظیم فواصل را به عهده مرورگر مورد استفاده کاربران می گذارد. مرورگر کار تنظیم و نمایش درست فواصل بین عناصر را در دست می گیرد.

 

inherit

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

نکته

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

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

کدنویسی با ۴مقدار:

شما می توانید مقدار هر لبه را از طریق حرکت در جهت عقربه های ساعت به خاطر بسپارید:
[php]
margin: 10px 20px 10px 0;
margin: top right bottom left;
[/php]

کدنویسی با ۳ مقدار

در اینحالت مقدار اول متعلق به بالا، مقدار دوم متعلق به راست و چپ و مقدار سوم متعلق به پایین است:
[php]
margin: 10px 10px 20px;
margin: top left/right bottom;
[/php]

کدنویسی با ۲ مقدار:

در اینحالت مقدار اول متعلق به بالا و پایین و مقدار دوم متعلق به چپ و راست می باشد:

[php]
margin: 10px auto;
margin: top/bottom left/right;
[/php]

 

کدنویسی با ۱ مقدار:

در اینحالت تنظیم یک مقدار برای margin ، برای تمامی چهار طرف حاشیه اعمال خواهد شد:

[php]
margin: 10px;
margin: top/bottom/left/right;
[/php]

 

یک مثال ساده

[php]
p {
margin: 25px 50px;
}
[/php]

کد بالا متنی را ایجاد خواهد کرد که از هر چهار طرف ۲۵ پیکسل با المان های اطراف خود فاصله دارد.

 

توجه داشته باشید

در css مقادیری وجود دارند که به صورت پبشفرض دارای margin هستند. از این مقادیر می توان به موارد زیر اشاره داشت:

  • تگ های h1 تا h6
  • figure
  • ol
  • ul
  • menu

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

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

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت