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

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

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

margin

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

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

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

ویژگی های margin

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

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

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

auto

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

inherit

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

نکته

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

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

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

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

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

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

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

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

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

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

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

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

یک مثال ساده

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

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

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

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

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

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