آموزش CSS – آشنایی با margin در سی اس اس (CSS) (جلسه ۲۱)

margin نشانگر فاصله مابین Element های مختلف است:

magin

همانطور که در تصویر فوق مشخص است، باکس سیاه رنگ نشانگر یک Element است که حاوی عبارت Object است. فاصله این عبارت تا لبه های باکس سیاه رنگ همان padding است که پیش از مورد بررسی قرار دادیم. خارج از باکس سیاه رنگ چهار فلشی که در چهار جهت می بینیم نشانگر margin است. فرض کنیم که می خواهیم این Element از سمت راست صفحه به میزان ۱۰۰ پیکسل فاصله داشته باشد. به راحتی با اختصاص مقدار ۱۰۰px با دستور margin-right می توانیم این کار را انجام دهیم.
margin ها را مانند padding هم به صورت مجزا و هم به صورت کلی می توان اختصاص داد. برای روشن شدن این مسئله ابتدا کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>This is margin</p>
   </body>
</html>

حال اقدام به تکمیل کدهای سی اس اس (CSS) به صورت زیر می نماییم:

p {
   margin-top: 50px;
   margin-right: 50px;
   margin-bottom: 50px;
   margin-left: 50px;
}

همانطور که در کد فوق می بینیم برای فاصله Element خود به ترتیب از سمت بالا، راست، پایین و چپ مقدار ۵۰px را در نظر گرفته ایم. حال اگر بخواهیم کد فوق را به صورت خلاصه بنویسیم، می توان آن را به صورت زیر بازنوسی کرد:

p {
   margin: 50px 50px 50px 50px;
}

می بینیم که با استفاده از دستور margin و اختصاص چهار Value به آن، برای هر چهار سمت بالا، راست، پایین و چپ مقدار ۵۰px را در نظر گرفته ایم.
حال هر دو فایل خود را ذخیره کرده و فایل اچ تی ام ال (HTML) را داخل مرورگر باز می کنیم:

margin_in_css

همانند padding اگر بخواهیم سه Value در نظر بگیریم، Value اول برای سمت بالا خواهد بود، Value دوم برای سمت راست و چپ و در نهایت Value سوم برای سمت پایین خواهد بود. اگر هم برای margin دو مقدار در نظر بگیریم، مقدار اول برای سمت بالا و پایین و مقدار دوم برای سمت راست و چپ خواهد بود و در نهایت اگر هم صرفاً یک Value در نظر بگیریم، این مقدار برای هر چهار جهت در نظر گرفته خواهد شد.
نکته بسیار مهمی که در ارتباط با margin وجود دارد این است که اگر دو Element اچ تی ام ال یکی در بالا و دیگری در پایین قرار گیرد و هر دو داری margin باشند، فقط یکی از margin ها مد نظر قرار داده خواهد شد. برای روشن شدن این مسئله تصویر زیر را در نظر می گیریم:

margin_in_css_1

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

margin_in_css_2

فرض کنیم که در تصویر فوق برای margin-bottom باکس بالایی مقدار ۲۰px و برای margin-top باکس پایینی مقدار ۲۰px در نظر گرفته شده است. حال بایستی انتظار داشته باشیم که مقدار ۴۰px مابین هر دو Element قرار گیرد اما این در حالی است که مقدار ۲۰px در نظر گرفته خواهد شد. حال اگر یکی از مقادیر ۲۰ و دیگر ۳۰ باشد، به صورت خودکار مقدار بزرگ تر در نظر گرفته خواهد شد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان