نحوه درک و کار با حاشیه CSS

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

برای افرادی که فقط وارد CSS می شوند ، این به راحتی یکی از آن چیزهایی است که می تواند شما را به فکر "این یک زبان احمقانه باشد که معنی ندارد!"

من آن را هر روز می بینم - هر دو در کلاس در حالی که مردم سعی می کنند مسائل فاصله خود را بفهمند و در بخش های نظرات YouTube من نیز.

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

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

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

برای این همه ، من از نمونه هایی از Bootcamp طراحی وب پاسخگو خود در Scrimba استفاده می کنم ، که من این طرح ساده را از آن کشیدم:

به هر حال حاشیه ها چیست؟

قبل از اینکه واقعاً به اینجا پرش کنیم ، می خواهم مطمئن شوم که همه ما می دانیم که حاشیه ها در واقع چیست!

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

MDN آنها را واقعاً خوب توضیح می دهد (تأکید معدن):

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

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

برخورد با برگه های آژانس کاربر

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

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

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

به طور پیش فرض، حاشیه های چپ و راست یک عنصر متنی روی 0 تنظیم شده اند، اما همه آنها با حاشیه های بالا و حاشیه پایین ارائه می شوند.

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

و همچنین از طریق . زیرا در واقع 0. 67em و برای آن 0. 83em است.

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

ما در یک ثانیه به این پیش فرض ها باز خواهیم گشت.

حاشیه های در حال فروپاشی

فروپاشی حاشیه جایی است که سردرد اغلب شروع می شود.

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

این قبلاً یک رفتار عجیب است، و سپس آن را به این واقعیت اضافه کنید که فقط برای حاشیه های عمودی (بالا و پایین) است، متوجه می شوم که چرا مردم از آنها گیج و اذیت می شوند.

ما می توانیم این را در عمل با مثال زیر مشاهده کنیم:

p پیوندها

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

) که شامل دو لینک داخل آن است.

وقتی افراد چنین کاری را انجام می دهند، انتظار دارند حاشیه بین پاراگراف میانی و پیوندهای زیر آن 80 پیکسل (40 پیکسل + 40 پیکسل) باشد، اما در واقع، 40 پیکسل است. دو حاشیه در حال لمس یکدیگر هستند، بنابراین در یکدیگر ادغام می شوند.

برای فشار بیشتر، بیایید خودمان را بدهیم

یک حاشیه از پایین تا 100 پیکسل:

p پیوندها

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

این چیز خوبیه

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

ما اغلب حتی به آن فکر نمی کنیم، فقط همان طور که انتظار داریم کار می کند.

وقتی چیز خوبی نیست

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

بیایید دوباره به همان اسکرین شات نگاه کنیم:

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

آیا می خواهید حدس بزنید از کجا می آید؟

در واقع از بالای آن جعبه سیاه می آید.

یادتان هست وقتی اشاره کردم که شیوه نامه های user-agent می توانند کارهای عجیب و غریبی انجام دهند؟

برای کمک به توضیح اینکه دقیقاً چه اتفاقی در اینجا می افتد، اجازه دهید یک حاشیه بزرگتر به h1 اضافه کنیم.

. کارتh1p پیوندها

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

این به این دلیل است که margin-top روی عنصر با margin-top در عنصر والد ادغام می شود.

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

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

به همین دلیل است که مردم از CSS متنفرند.

به طور مشابه، در کد بالا به همه پاراگراف ها حاشیه-پایین دادیم. این حاشیه در عناصر p. link، حاشیه-پایین عنصر . card را لمس می کند، به این معنی که این دو با هم ادغام می شوند و حاشیه به جای پیوندها، عنصر . card را تحت تأثیر قرار می دهد.

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

مشکل این است که ما از حاشیه برای هدف اشتباهی استفاده می کنیم

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

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

در این صورت، ما می خواهیم که کارت ما پیش زمینه بیشتری داشته باشد، بنابراین نباید به فرزندان آن حاشیه اضافه کنیم. در عوض باید padding را به خود آن عنصر اضافه کنیم.

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

همانطور که بالشتک فضای کافی بین

s و s، اکنون می توانیم حاشیه هایی را که قبلاً به آنها اضافه کرده بودیم حذف کنیم.

حاشیه ها همیشه فرو نمی ریزند

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

اما یک راه حل برای این کار نیز وجود دارد ، که ما را به طور کامل به آن دسته از برگه های کاربری که در ابتدا با آنها صحبت کردیم ، باز می گرداند.

یک روش آسان برای جلوگیری از فکر کردن در مورد حاشیه های فروپاشی وجود دارد

اول از همه ، قانون کلی من وجود دارد که در بالا درباره آن صحبت کردم:

• اگر به فضای خالی احتیاج دارید ، از حاشیه استفاده کنید
• اگر به پیش زمینه بیشتری نیاز دارید ، از بالشتک استفاده کنید

این بیشتر اوقات شما را از دردسر دور می کند. اما بیایید یک قانون اضافی به این امر اضافه کنیم که حتی بیشتر نیز کمک خواهد کرد:

• سعی کنید از بالای حاشیه خودداری کنید مگر اینکه واقعاً به آن احتیاج داشته باشید

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

H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، P ، Ul ، OL

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

(توجه: اگر کد را در اینجا در FreecodeCamp بازرسی کنید ، خواهید دید که آنها کاری مشابه انجام می دهند!)

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

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

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