تعریف مارجین و پدینگ و نحوه استفاده از آن در المنتور

تفاوت کادر ها در CSS

ویژگی outline

ممکن است شما عزیزان مفهوم چهار عنوان margin، padding، border و outline را با یکدیگر اشتباه بگیرید. با نگاهی ریز بینانه و دقیق، در این بخش به بررسی و توضیح تک تک این موارد خواهیم پرداخت.

هر عنصر تعریف شده در HTML در یک ساختار مشخص نمایش داده خواهد شد. (البته برخی از عناصر بخش head در خروجی نشان داده نمی شوند)

قطعه کد زیر را در نظر بگیرید:

<p style="background-color:pink;"> ایران المنتور </p>

خروجی حاصل شده کد بالا:

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

ویژگی border

بخش دیگری که می توان برای یک عنصر p در نظر گرفت، border (قاب) آن است. به قطعه کد زیر توجه کنید:

<p style="background-color:pink; border:solid 5px black;"> ایران المنتور </p>

خروجی حاصل شده کد بالا:

در این جا border به عنوان قاب محتوای مشخص شده در نظر گرفته شده است.

تا اینجا با مفهوم outline و border آشنا شدید. حال در ادامه به تفاوت میان margin و padding خواهیم پرداخت.

ویژگی padding

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

<p style="background-color:pink; border:solid 5px black; padding:20px;"> ایران المنتور </p>

خروجی حاصل شده کد بالا:

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

تک پارامتری: در صورتی که به ویژگی padding تنها یک مقدار داده شود (مانند مثال بالا) این مقدار برای چهار جهت عنصر (بالا، پایین، چپ، راست) تنظیم خواهد شد. در مثال بالا، عنصر p از چهارجهت خود مقدار مشخصی حاشیه از درون (padding) گرفته است.

دو پارامتری: در صورتی که به ویژگی padding دو مقدار داده شود. مقدار اول برای جهات Y (بالا و پایین) و مقدار دوم برای جهات X (چپ و راست) در نظر گرفته می‌شود. برای درک بهتر به مثال زیر توجه کنید:

<p style="background-color:pink; border:solid 5px black; padding:5px 30px;"> ایران المنتور </p>

خروجی حاصل شده کد بالا:

همانطور که می بینید، عبارت ایران المنتور از بالا و پایین 5 پیکسل و از سمت چپ و راست خود 30 پیکسل فاصله گرفته است.

چهار پارامتری: در صورتی که به ویژگی padding چهار مقدار مختلف داده شود؛ اولین مقدار برای جهت بالا (top)، دومین مقدار برای جهت راست (right)، سومین مقدار برای جهت پایین (bottom) و چهارمین مقدار برای جهت چپ (left) تعیین خواهد شد. به مثال زیر توجه فرمایید:

<p style="background-color:pink; border:solid 5px black; padding:5px 20px 30px 0px;"> ایران المنتور </p>

خروجی حاصل شده کد بالا:

همانطور که می بینید، در این مثال، محتوای مورد نظر از هر طرف پدینگ گرفته است.

علاوه بر این موارد، 4 ویژگی دیگر هم هستند که از ویژگی padding مشتق شده‌اند. این ویژگی‌ها می‌توانند برای زمانی که قصد تنظیم padding برای یکی از جهات را دارید مناسب باشند.

ویژگی‌های مشتق شده از ویژگی padding به شکل زیر است:

• ویژگی padding-top (حاشیه درونی از بالا)
• ویژگی padding-bottom (حاشیه درونی از پایین)
• ویژگی padding-left (حاشیه درونی از چپ)
• ویژگی padding-right (حاشیه درونی از راست)

ویژگی margin

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

ویژگی مارجین هم می‌تواند مشابه ویژگی پدینگ بصورت تک پارامتری، دو پارامتری و چهار پارامتری مقداردهی شود. جهت‌هایی که برای پارامترهای مختلف درنظر گرفته شده هم دقیقا مثل ویژگی پدینگ می باشد. از این رو دیگر این جهات برای ویژگی margin توضیح داده نمی‌شود.

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

ویژگی‌های مشتق شده از ویژگی margin:

• ویژگی margin-top (حاشیه بیرونی از بالا)
• ویژگی margin-bottom (حاشیه بیرونی از پایین)
• ویژگی margin-left (حاشیه بیرونی از چپ)
• ویژگی margin-right (حاشیه بیرونی از راست)

تفاوت مارجین با پدینگ در چیست؟

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

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

مارجین (فاصله) میزان فضای خارج از مرز عنصری را که ویرایش می کنید کنترل می کند در حالی که پدینگ میزان فضای داخل حاشیه و محتوای عنصری را که ویرایش می کنید کنترل می کند.

مارجین و پدینگ در المنتور

بیایید یک مثال ساده در المنتور عنوان کنیم. بخش، ستون، محتوا

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

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

این طرح بدون هیچ گونه حاشیه یا پدینگ در سطح ستون است.

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

مارجین و پدینگ – پیکسل یا درصد؟

صدها مقاله و بحث در این خصوص وجود دارد. حال ما خودمان این موضوع را بررسی می کنیم.

اگر می خواهید روی دسکتاپ طرحی با عرض کامل داشته باشید، ممکن است بخواهید با مقادیر درصد برای مارجین و پدینگ کار کنید.

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

فضای ویجت چیست؟

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

به چه چیز دیگری فکر می کنید؟

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

نکته: حتما توجه داشته باشید که در موبایل هم پدینگ ها و مارجین های شما در حالت بهینه قرار داشته باشند.

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

بسته به محصول یا خدماتی که ارائه می دهید، وب سایت شما بیشتر از طریق موبایل یا دسکتاپ بازدید می شود؛ یعنی به طور مثال شخصی هست که 95 درصد بازدید هایش را از طریق لپ تاپ یا کامپیوتر انجام می دهد در صورتی این موضوع در وب سایت های رستوران یا هر محصول ها خدمات دیگر متفاوت بوده و اغلب کاربران با موبایل وب سایت را بررسی می کنند.

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

نتیجه گیری

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

همانطور که گفته شد مارجین (فاصله) فضای خارج را تحت تاثیر قرار داده و پدینگ فضای داخل را تغییر می دهد. این مارجین و پدینگ را می توان در بخش های سکشن، ستون، ابزارک ایجاد کرد.

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