تمام آنچه شما باید در مورد حاشیه CSS و بالشتک بدانید

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

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

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

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

آنها را به عنوان پایه و اساس استراتژی تعامل با مشتری خود فکر کنید.

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

طرح کلی

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

1. حاشیه و بالشتک چیست؟

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

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

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

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

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

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

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

وب سایت های فروشگاه اینترنتی اغلب اولین برداشت هر تجارت را برای مخاطبان بازار خود ایجاد می کنند. این یک ابزار اساسی است که مشتریان ابتدا قبل از انتخاب تجارت با شما در نظر می گیرند ، و شما فقط چند ثانیه برای تحت تأثیر قرار دادن آنها دارید.

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

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

2. تفاوت بین بالشتک و حاشیه

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

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

بنابراین ، در اینجا تفاوت اصلی بین بالشتک و حاشیه وجود دارد:

01. بالشتک تحت تأثیر رنگ پس زمینه است در حالی که حاشیه نیست

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

از طرف دیگر ، حاشیه ها عمدتاً شفاف هستند و تحت تأثیر تغییرات رنگ پس زمینه قرار نمی گیرند. بنابراین ، بالشتک با افزودن رنگ پس زمینه آشکارتر می شود در حالی که حاشیه ها بدون در نظر گرفتن نامرئی هستند.

02. حاشیه را می توان به صورت خودکار تنظیم کرد در حالی که بالشتک نمی تواند

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

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

03. بالشتک فضای داخل را کنترل می کند در حالی که حاشیه فضای بین عناصر را کنترل می کند

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

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

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

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

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

05. حاشیه می تواند منفی باشد در حالی که بالشتک نمی تواند

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

متأسفانه ، مقادیر بالشتک فقط می توانند مثبت باشند. تلاش برای به دست آوردن مقدار منفی ، مرزهای شما را به محتوا فرو می برد و منطقه محتوا را فراتر از اندازه محتوا کوچک می کند.

3. چه زمانی از حاشیه و بالشتک استفاده کنید

از چشم انداز ، به نظر می رسد که هر دو حاشیه و بالشتک از همان قدرت ویژه به صفحات وب برخوردار هستند. اما همانطور که قبلاً از بحث قبلی دیده بودیم ، بالشتک اغلب فضای داخلی را در یک مرز کنترل می کند در حالی که حاشیه ها فضای بیرونی را کنترل می کنند.

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

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

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

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

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

از آنجا که عناصر مختلف یک ظاهر طراحی شده غالباً با حاشیه و بالشتک متفاوت کار می کنند ، در اینجا نکات ارزشمندی برای در نظر گرفتن در هنگام انتخاب بین این دو وجود دارد:

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

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

    

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

    فروشگاه Shopify خود را بدون محدودیت طراحی کنید

    کاملاً قابل تنظیم100+ الگو و 50+ عنصر

    کاملاً رایگان/ بدون آزمایش. برای سرعت سریع بهینه شده است.

    4- نحوه اضافه کردن حاشیه و بالشتک

    01. نحوه اضافه کردن حاشیه در CSS

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

    • بالای حاشیه
    • حاشیه درست
    • حاشیه حاشیه
    • حاشیه سمت چپ

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

    به عنوان مثال ، می توانید از کد زیر برای اضافه کردن 30 پیکسل در بالا ، 75 پیکسل در سمت راست ، 45 پیکسل در پایین و 100 پیکسل در سمت چپ حاشیه خود استفاده کنید:

    حاشیه: 30px 75px 45px 100px ؛

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

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

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

    خوشبختانه ، شما می توانید از زمینه قالب بندی بلوک (BFC) یا ظروف فلکس و شبکه برای جلوگیری از چنین مواردی استفاده کنید.

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

    

    02. نحوه اضافه کردن بالشتک در CSS

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

    • بالش بالا
    • درست بالشتک
    • کف پا
    • بالشتک سمت چپ

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

    به عنوان مثال ، می توانید از کد زیر برای اضافه کردن 20 پیکسل در بالا ، 25 پیکسل در سمت راست ، 50 پیکسل در پایین و 75 پیکسل در سمت چپ بالشتک خود استفاده کنید:

    بالشتک: 20px 25px 50px 75px ؛

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

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

    اما حتماً چهار اعلامیه مهم را در نظر داشته باشید ، یعنی بالشتک سمت چپ ، بالشتک بالا ، بالشتک سمت راست و پایین بالشتک.

    

    5- نتیجه گیری

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

    در توسعه وب ، استفاده مؤثر از فضای سفید معمولاً بسیار مهم است زیرا اساساً بر خوانایی ، سلسله مراتب صفحه ، تمرکز و درک تأثیر می گذارد. اینها عوامل اصلی هستند که به تجربه بهتر کاربر کمک می کنند و به همین دلیل باید مفاهیم اساسی توسعه وب را بدانید.

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

    هر دو آنها اهداف مختلفی را ارائه می دهند و نباید به صورت متقابل استفاده شوند.

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

    فقط به یاد داشته باشید که می توانید از سازندگان صفحه مانند PageFly استفاده کنید تا صفحات فروشگاه خود را در کمترین زمان ممکن و بدون هیچ تجربه برنامه نویسی شخصی سازی و شخصی سازی کنید.< Span> در حالی که حاشیه CSS و بالشتک برخی از مفاهیم اصلی هستند که باید برای مدل جعبه خود تسلط داشته باشید ، نباید این دو را اشتباه بگیرید.