اگر بدانید چه زمانی و چگونه از هر یک از آنها استفاده کنید، به خوبی در راه ایجاد وب سایت های پاسخگو و خیره کننده خواهید بود که در هر دستگاهی عالی به نظر می رسند. اما تسلط بر آنها می تواند کمی تمرین کند.

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

اصول طراحی وب و کدنویسی

قبل از اینکه به تفاوت های ظریف حاشیه ها و padding بپردازیم، اجازه دهید به سرعت اصول توسعه وب را مرور کنیم: HTML و CSS .

HTML (زبان نشانه گذاری HyperText) به مرورگر وب شما می گوید که چگونه یک صفحه وب را نمایش دهد. CSS (Cascading Style Sheets) مجموعه ای از قوانین را ارائه می دهد که در HTML اعمال می شود و سبک یک وب سایت را کنترل می کند. بنابراین، ما برای تعریف متن خاص برای هدر در یک صفحه به HTML تکیه می کنیم، اما می توانیم از CSS برای تنظیم یک فونت، اندازه متن و رنگ ثابت برای همه سرصفحه ها در یک کلاس در یک وب سایت استفاده کنیم .

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

مدل جعبه CSS چیست؟

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

1. محتوا – درونی ترین قسمت جعبه. محتوا می تواند تصویر، متن، عنوان یا چیز دیگری باشد.
2. Padding – فضای داخلی بین محتوا و حاشیه جعبه شما.
3. حاشیه – محیط جعبه. حاشیه ها می توانند نامرئی باشند یا می توانند یک خط رنگی ضخیم مانند تصویر سبز در بالا باشند.
4. حاشیه – فضای بیرونی (یا کمبود فضا) اطراف جعبه.

جعبه های CSS را می توان به صورت عمودی یا افقی تراز کرد. آنها می توانند در کنار یکدیگر بنشینند، درون یکدیگر لانه کنند و حتی می توانند روی هم قرار بگیرند.

تفاوت بین حاشیه و padding چیست؟

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

Padding را می توان روی صفر پیکسل و بالاتر تنظیم کرد. می تواند اندازه عنصر خود را تغییر دهد و بر میزان قابل مشاهده بودن رنگ پر شده یا تصویر پس زمینه در یک جعبه تأثیر بگذارد.

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

شباهت بین حاشیه در مقابل padding

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

تصویر بالا مجموعه ای از جعبه های تودرتو و فاصله متناظر با آنها را در Webflow Designer نشان می دهد. ما یک جعبه ظرف با حاشیه سیاه و سفید و رنگ آبی روشن یا رنگ پس زمینه داریم. درون آن محفظه، یک بلوک div حاوی یک تصویر آرم (محتوا)، صفر پیکسل از بالشتک، یک حاشیه سیاه نقطه‌دار و یک حاشیه 100 پیکسلی وجود دارد.

اما می‌توانیم با استفاده از بالشتک جعبه کانتینر به جای حاشیه بلوک div به همان ظاهری دست پیدا کنیم. در تصویر زیر، padding ظرف را از صفر به 100 پیکسل افزایش داده‌ایم و حاشیه بلوک div را از 100 پیکسل به صفر کاهش داده‌ایم.

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

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

زمان استفاده از CSS padding

ما می توانیم از CSS padding برای موارد زیر استفاده کنیم:

• فضای تنفس را مستقیماً در اطراف محتوا تنظیم کنید
• اندازه جعبه ها یا عناصر html را تنظیم کنید

بیایید به چند نمونه نگاهی بیندازیم.

اتاق تنفس را در اطراف محتوا تنظیم کنید

ما می توانیم از padding برای تنظیم آسان اتاق تنفس در اطراف محتوای یک عنصر مانند یک دکمه یا کارت اطلاعات استفاده کنیم. در اینجا یک مثال با استفاده از الگوی وب سایت خرده فروشی Mariela آورده شده است . این الگو دارای یک بخش مقدماتی زیبا در صفحه اصلی است که سه “جعبه معرفی” را نشان می دهد.

“جعبه های مقدمه” حاوی یک تصویر و یک “جعبه متن مقدمه” است. ما می‌توانیم فضای سفید بیشتری – یا در این مورد، فضای Medium Thistle Hue بیشتری – در اطراف متن با افزایش padding “Intro Text Box” اضافه کنیم. در اینجا به نظر می رسد.

و از آنجایی که ما از یک کلاس (Intro Text Box) برای هر سه کارت استفاده کرده‌ایم، فقط باید این را یک بار در طراح Webflow تنظیم کنیم و این تغییر در هر سه کارت تکرار می‌شود. همچنین می‌توانیم با اضافه کردن بالشتک به کادر تصویر، کمی اتاق تنفس در اطراف تصاویر اضافه کنیم. در اینجا به نظر می رسد.

در نهایت، می‌توانیم با انتخاب کل کادر، نگه‌داشتن کلید shift و کشیدن کنترل padding در طراح Webflow، اتاق تنفس را در «جعبه‌های متن مقدمه» به طور مساوی اضافه کنیم.

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

اندازه کلی یک عنصر را تنظیم کنید

همچنین می توانیم از padding برای تنظیم اندازه عناصر استفاده کنیم. در اینجا یک مثال با استفاده از الگوی وب سایت خرده فروشی Toystore آورده شده است . این الگو دارای یک بلوک div “Hero Intro” در بالا با رنگ پس زمینه سفید است.

می‌توانیم جعبه سفید را با کاهش بالشتک کوچک‌تر کنیم (که از پیش تعیین شده به 24 پیکسل می‌رسد). در زیر می توانید ببینید که اگر بالشتک را از هر طرف به 5 پیکسل تغییر دهیم، به نظر می رسد.

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

اگر ظاهر نامتقارن‌تری را ترجیح می‌دهید، می‌توانید از بالشتک برای اضافه کردن فضای خالی فقط به یک یا دو طرف استفاده کنید. وقتی padding-top و padding-bottom را روی 140 پیکسل تنظیم می کنیم اما padding-left و padding-right را روی 24 پیکسل می گذاریم، این اتفاق می افتد.

فضای خالی بیشتری در بالا و پایین جعبه خود داریم اما در طرفین کمتر است.

زمان استفاده از حاشیه CSS

ما می توانیم از حاشیه CSS برای موارد زیر استفاده کنیم:

• جعبه های مرکزی
• جعبه های اطراف اتاق تنفس را تنظیم کنید
• عناصر همپوشانی

بیایید به چند نمونه نگاهی بیندازیم.

عناصر را در یک صفحه وب وسط قرار دهید

برای وسط افقی موارد در صفحه با استفاده از حاشیه، فقط حاشیه-راست و حاشیه-چپ را روی Auto قرار می دهیم. ما می‌توانیم نمونه‌هایی از این تکنیک را در سرتاسر وب ببینیم، اما در اینجا نمونه‌ای وجود دارد که می‌توانید با آن در Webflow Designer بازی کنید. الگوی وب سایت Method Brand را باز کنید و روی Hero Container در بالا کلیک کنید.

متوجه خواهید شد که حاشیه های راست و چپ روی Auto تنظیم شده اند.

جعبه های Container در Webflow نیز به این ترتیب کار می کنند. هنگامی که یک Container جدید به پروژه ای در Designer اضافه می کنید، حاشیه های راست و چپ روی Auto از پیش تنظیم شده اند تا Container را در مرکز قرار دهید.

اتاق تنفس را خارج از جعبه تنظیم کنید

برای نشان دادن اینکه چگونه می‌توانیم از حاشیه برای تنظیم اتاق تنفس یا فضای خالی خارج از جعبه‌ها استفاده کنیم، اجازه دهید به الگوی وب‌سایت خرده‌فروشی Mariela مراجعه کنیم . یک بار دیگر، وقتی برای اولین بار الگو را در Webflow Designer باز می‌کنید، «جعبه‌های مقدمه» چگونه به نظر می‌رسند.

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

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

در بسیاری از موارد، اگر دو آیتم مجاور داشته باشید، حاشیه های هر آیتم با هم جمع می شوند و حاشیه نمایش داده شده مجموع دو عدد خواهد بود. بنابراین، اگر کارت A دارای حاشیه سمت راست بر روی 5 پیکسل و کارت B (در سمت راست کارت A) دارای یک مجموعه حاشیه-چپ روی 5 پیکسل باشد، فضای خالی بین کارت ها 10 پیکسل خواهد بود.

اما در موارد خاص، به‌ویژه زمانی که دو عنصر روی هم قرار می‌گیرند، حاشیه بزرگ‌تر رعایت می‌شود و حاشیه کوچک‌تر جمع می‌شود یا طوری رفتار می‌شود که انگار روی صفر تنظیم شده است. ما می‌توانیم نمونه‌ای از جمع‌کردن حاشیه را در کادرهای متنی بالای «جعبه‌های معرفی» در قالب وب‌سایت خرده‌فروشی Mariela ببینیم. اگر روی هر کادر در Webflow Designer کلیک کنیم، می‌بینیم که حاشیه پایین برای “Mini Title” روی 10 پیکسل و حاشیه بالایی برای “Intro Paragraph” روی صفر پیکسل تنظیم شده است.

و اگر چیزی کمتر از 11 پیکسل به حاشیه بالای «پاراگراف مقدمه» اضافه کنیم، هیچ اتفاقی نمی‌افتد. این به این دلیل است که حاشیه کوچکتر در حال فروپاشی است.

استفاده از حاشیه برای عناصر همپوشانی

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

این افکت با استفاده از حاشیه های منفی در بالا و پایین تصویر به دست آمد. برای مقایسه، وقتی حاشیه‌های تصویر آیفون را از هر طرف صفر می‌کنیم، این اتفاق می‌افتد.

آیفون دیگر با نوار رنگی پایین صفحه همپوشانی ندارد و اکنون به موازات هدر سمت چپ تصویر ظاهر می شود.