ویجت

۹۱۳۰۲۶۵۴ ۰۲۱

عنوان ویدئو آموزشی

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

تعداد ویدئو

ویدئو شماره 17

زمان ویدئو

13:53 دقیقه

مدرس ویدئو

مهدی جبین پور

نام دوره آموزشی

آموزش المنتور

تاریخ بروزرسانی

1401/07/18

کلیک کنید

افزونه المنتور پرو
حرفه‌ای ترین صفحه ساز وردپرس

مفهوم پدینگ و مارجین در طراحی وب

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

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

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

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

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

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

برای اینکه متوجه شوید پدینگ و مارجین چیست به تنظیمات پیشرفته المان ویرایشگر متن بروید و یک پس زمینه برای آن انتخاب کنید. اگر یک پس زمینه تیره رنگ برای متن خود انتخاب کنید متوجه خواهید شد که کلمات متن از پس زمینه بیرون زده؛ این مسئله یعنی اینکه فاصله داخلی کم است. برای اینکه به المان خود فاصله داخلی دهید به تب پیشرفته بروید و به چهار طرف المان مقدار یکسانی فاصله اعمال کنید. البته اگر گزینه همسان‌سازی را غیر فعال گردانید، می‌توانید به هر طرف به مقدار دلخواه فاصله دهید.

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

یکی دیگر از کاربردهای جالب پدینگ و مارجین این است که شما با استفاده از آن‌ها می‌توانید دو المان را به زیبایی با یکدیگر ادغام کنید. به عنوان مثال به قسمت پایین المان بالایی 100px فاصله خارجی می‌دهید و به سمت بالای المان پایینی -50px فاصله خارجی اعمال می‌کنید. با انجام این کار مشاهده خواهید کرد که دو المان به زیبایی بر روی یکدیگر قرار می‌گیرند.

سخن پایانی

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

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

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