cssblog.ir logo
P

margin

فاصله دادن بین عناصر در صفحات وب

مشخصه margin این امکان را می‌دهند که در بیرون یک عنصر فضایی ایجاد کنیم و بین آن عنصر و سایر عناصر فاصله (حاشیه) ایجاد کنیم. در واقع این مشخصه بیرونی‌ترین بخش عناصر (یا همان box)  را تعیین می کند

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

برای مثال: اگر بخواهیم از بالا و پایین به اندازه ۳۰ پیکیسل و از سمت چپ و راست ۱۰ پیکسل margin ایجاد کنیم، استایل ما به این شکل خواهد بود:

div {
	margin-up: 30px;
	margin-right: 10px;
	margin-bottom: 30px;
	margin-left: 10px;
}

مشخصه margin یک مشخصه shorthand است که ترکیب کننده ۴ زیر مشخصه زیر است:

margin-top, margin-right, margin-bottom, margin-left

مثال اول را می توان به این شکل نیز نوشت:

div {
	margin: 30px 10px 30px 10px;
}

اما معمولا برای کاهش حجم استایل‌ها و افزایش خوانایی همیشه توصیه می‌شود تا در صورت امکان از حالت shorthand استفاده شود.

واحدهای قابل قبول

ما می توانیم از واحدهای پیکسلی، درصدی و همچنین واحدهای نسبیem و remبرای این مشخصه استفاده کنیم که در اینجا کاربرد هریک را شرح می دهیم:

واحد پیکسلی

ساده ترین نوع مقدار دهی. در این روش بر مبنای پیکسل تعیین می کنیم که چه مقدار margin مدنظر ما می باشد. مثال:

div {
	margin: 20px 10px 0 10px;
}

واحد درصدی

نکته مهم درباره این واحدها دانستن مبنای این محاسبه این درصدها می باشد. مشابه با برخی قسمت های دیگر در CSS در اینجا نیز مقدار محاسبه شده برای هر درصد به معنی عرض والد تقسیم بر ۱۰۰ می‌باشد. یعنی مثلا اگر والد ۵۰۰ پیکسل باشد، هر درصد داده شده برای margin به میزان ۵ پیکسل می‌باشد و در نتیجه عددی مانند ۲۵ درصد، به مقدار ۱۲۵ پیکسل محاسبه می شود.

مثال: این مثال اثبات می کند که درصد داده شده در margin به نسبت عرض والد محاسبه شده است. چراکه عرض والد ۴۰۰ پیکسل و ۱۰ درصد عرض آن برابر با ۴۰ پیکسل شده است. نشانه اصلی ۴۰ پیکسل شدن margin-leftنیز مربع دوم است که بصورت ثابت ۴۰ پیکسل margin-leftدارد و مشاهده می نمایید که هر ۲ مربع در یک راستا قرار گرفته‌اند. 

واحدهای نسبی

همانطور که می دانید واحدهایem وrem به نسبت سایز فونت محاسبه می‌شوند و برای مثال اگر سایز فونت مثلا ۱۶ پیکسل باشد هر em نیز برابر ۱۶ پیکسل خواهد بود. مثال:

div {
	margin: 1em 2em 1em 2em;
}

حالت های دیگر مقداردهی

یک مقدار

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

div {
	margin: 3em;
}

دو مقدار

با وارد کردن دو مقدار، مقدار اول برای margin بالا و پایین و مقدار دوم برای چپ و راست استفاده خواند شد. مثال:

div {
	/*
	margin-top: 3em;
	margin-right: 1em;
	margin-bottom: 3em;
	margin-left: 1em;
	*/
	margin: 3em 1em;
}

سه مقدار

حالت دیگر این وارد کردن ۳ مقدار برای این مشخصه است که در این صورت مقدار اول برای بالا و مقدار دوم برای چپ و راست و مقدار سوم برای پایین درنظر گرفته خواهد شد. مثال:

div {
	/*
	margin-top: 3em;
	margin-right: 4em;
	margin-bottom: 2em;
	margin-left: 4em;
	*/
	margin: 3em 4em 2em;
}

برخورد margin ها

نکته ای درباره رفتار margin ها وجود که از نظر من بسیار مهم بوده و حتما می بایست به آن دقت شود. برای درک بهتر به مثال زیر دقت کنید.

در این مثال عنوان h1  دارای margin-bottomبه میزان ۳۰ پیکسل است و پاراگرافی که بعد از آن قرار دارد ۱۰ پیکسل margin-topدارد. در نگاه اول ممکن است تصور کنیم که فاصله ایجاد شده برابر با ۴۰ پیکسل (۱۰+ ۳۰) خواهد بود، اما اگر دقت کنید متوجه می‌شود که margin-topپاراگراف تاثیری در فاصله آن نگذاشته است و فاصله ایجاد شده بدلیل margin-bottomـی است که از سمت بالا و توسط عنوان به آن اعمال شده است.

خب همانطور که از مثال فوق مشخص است وقتی که margin ها با یکدیگر برخورد پیدا می کنند، آن margin اعمال می‌شود که مقدار بیشتر (زور بیشتر) داشته باشد.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند