CSS Padding vs Margin: چگونه تصمیم بگیریم از کدام استفاده شود

دانستن اینکه چه موقع از CSS Padding vs Margin استفاده کنید - و برعکس ، دشوار است. در اینجا ، ما توضیح می دهیم که چه زمانی باید از دیگری استفاده کنیم.

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

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

اگر تازه وارد CSS هستید یا علاقه مند به کسب اطلاعات بیشتر در مورد Margins vs Padding هستید ، در ادامه بخوانید تا دقیقاً یاد بگیرید که چه چیزی هستند و چگونه تصمیم بگیرید که چه موقع از هر یک استفاده کنید.

طراحی وب و اصول برنامه نویسی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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