فاصله در CSS

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

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

فهرست مطالب

• انواع فاصله
  • حاشیه - فاصله بیرونی
  • فروپاشی حاشیه
  • حاشیه منفی
  • بالشتک - فاصله داخلی
  • یک جزء هدر
  • فاصله در سیستم های شبکه - Flexbox
  • فاصله در سیستم های شبکه - شبکه CSS
  • شکاف در تقاضا
  • برخورد با حاشیه پایین
  • مؤلفه کارت
  • محتوای مقاله
  • فقط در مورد حاشیه
  • حالت های نوشتن CSS
  • محاصره اجزای سازنده
  • چالش هایی با اجزای فاصله
  • اندازه قطعات فاصله
  • با استفاده از عناصر شبه

  انواع فاصله

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

  

  در CSS ، این امکان را دارد که فاصله را به شرح زیر انجام دهید:

  منزل  لایه گذاری: 1REM; حاشیه پایین: 1REM; > 

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

  حاشیه - فاصله بیرونی

  برای اضافه کردن فاصله بین یک عنصر و دیگری استفاده می شود. به عنوان مثال ، در مثال قبلی ، من حاشیه را اضافه کردم: 1REM برای اضافه کردن فاصله عمودی بین دو عنصر انباشته.

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

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

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

  

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

  برای جلوگیری از چنین مشکلی ، توصیه می شود طبق این مقاله از حاشیه تک جهت استفاده کنید. حتی بیشتر ، ترفندهای CSS نظرسنجی بین حاشیه حاشیه و حاشیه را انجام داد. 61 ٪ از رای دهندگان پایین حاشیه را بیش از حاشیه ترجیح می دهند.

  نحوه حل مسئله را در زیر مشاهده کنید:

  منزل: نه(:آخرین فرزند)  حاشیه پایین: 1REM; > 

  با انتخاب: انتخاب کننده CSS ، می توانید به راحتی حاشیه را از آخرین فرزند حذف کنید تا از فاصله غیرضروری خودداری کنید.

  مثال دیگری که مربوط به فروپاشی حاشیه کودک و والدین است. بیایید فرض کنیم موارد زیر:

   کلاس ="والدین">  کلاس ="کودک">من عنصر کودک هستم  

  . والدین  لبه: 50 px خودکار 0 خودکار; عرض: 400px; قد: 120px; > . کودک  لبه: 50 px 0; > 

  

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

  • اضافه کردن مرز به عنصر والدین
  • تغییر نمایشگر عنصر کودک به درون خطی

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

  

  حاشیه منفی

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

  

  والدین دارای بالشتک هستند: 1REM ، که باعث شده کودک از بالا ، چپ و راست جبران کند. با این حال ، عنصر کودک باید به لبه های والدین خود بچسبد. خوب ، حاشیه های منفی برای نجات!

  . والدین  لایه گذاری: 1REM; > . کودک  حاشیه چپ: -1REM; حاشیه راست: -1REM; حاشیه: -1REM; > 

  

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

  بالشتک - فاصله داخلی

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

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

  

  بالشتک کار نمی کند

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

  این فقط یک یادآوری دوستانه است که ویژگی نمایشگر باید برای عناصر درون خطی تغییر یابد.

  منزل طول  نمایش دادن: درون خطی; در بالای بالشتک: 1REM; در کف پایین: 1REM; > 

  شکاف شبکه CSS

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

  

  منزل  نمایش دادن: توری; ستونهای شبکه: 1fr 1fr; شبکه: 16 پیروز; / * شکاف 16px را برای هر دو ردیف و ستون اضافه می کند */ > 

  از خواص Longhand برای GAP می توان به شرح زیر استفاده کرد:

  منزل  نمایش دادن: توری; ستونهای شبکه: 1fr 1fr; شبکه ردیف: 24 پیک; شکاف: 16 پیروز; > 

  شکاف Flexbox CSS

  GAP یک ویژگی پیشنهادی است که برای هر دو شبکه CSS و Flexbox استفاده خواهد شد. نکته منفی که فقط در زمان نوشتن این مقاله در Firefox پشتیبانی می شود.

  منزل  نمایش دادن: خم شدن; خمیده: بسته بندی کردن; شکاف: 16 پیروز; > 

  با افزودن آن ، استفاده از آن با CSSSupports امکان پذیر نیست تا تشخیص دهد که آیا پشتیبانی می شود یا نه و بر اساس آن تقویت می شود. اگر آن را دوست دارید ، لطفاً برای کمک به آوردن آن به Chrome رای دهید.

  موقعیت یابی CSS

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

  مثال زیر را در نظر بگیرید. کارتی که دارای یک نماد است که باید از لبه سمت چپ والدین خود فاصله داشته باشد. در این حالت ، از CSS زیر استفاده می شود:

  . دسته بندی  موقعیت: مطلق; ترک کرد: 16 پیروز; بالا: 16 پیروز; > 

  

  از موارد و نمونه های عملی استفاده کنید

  در این بخش ، موارد استفاده متفاوتی را انجام می دهید که هنگام کار بر روی پروژه های CSS با آنها روبرو خواهید شد.

  یک جزء هدر

  

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

  کلاس ="C-Header">کلاس ="C-logo">href ="#">لوگوکلاس ="C-HEADER__NAV">کلاس ="C-nav">  href ="#">. href ="#"کلاس ="C-USER">احمدکلاس ="C-Avatar"SRC ="shadeed. jpg"alt =""/>

  

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

  header  دست چپ: 16 پیروز; حق بالشتک: 16 پیروز; > 

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

  . c-nav a  نمایش دادن: مسدود کردن; لایه گذاری: 16 پیروز 8 عدد; > 

  . c-nav li  / * این فاصله ای را که در اسکلت دیدید ایجاد می کند */ نمایش دادن: درون خطی; > 

  سرانجام ، آواتار و نام کاربری حاشیه سمت چپ خود دارند.

  کاربر. IMG, کاربر. طول  حاشیه چپ: 10 عدد; > 

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

  کاربر. IMG, کاربر. طول  حاشیه راپلین: 1REM; > 

  

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

  • حداقل عرض را برای موارد ناوبری تنظیم کنید
  • بالشتک افقی را افزایش دهید
  • یک حاشیه اضافی در سمت چپ جداکننده اضافه کنید

  ساده ترین و بهتر راه حل سومین راه حل است که اضافه کردن حاشیه چپ است.

  کاربر.  حاشیه چپ: 8 عدد; > 

  فاصله در سیستم های شبکه - Flexbox

  شبکه ها یکی از مورد استفاده ترین مواردی است که برای فاصله. مثال زیر را در نظر بگیرید:

  

  فاصله باید بین ستون ها و ردیف ها باشد. نشانه HTML زیر را در نظر بگیرید:

   کلاس ="بسته بندی">  کلاس ="شبکه شبکه-4">  کلاس ="grid__item">  کلاس ="کارت">   کلاس ="grid__item">  کلاس ="کارت">   

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

  . Grid-4  نمایش دادن: خم شدن; خمیده: بسته بندی کردن; > . grid__item  خمیدگی: 25 ٪; حاشیه پایین: 16 پیروز; > 

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

  . grid__item  خمیدگی: کلفت(25 ٪ - 10 عدد); حاشیه چپ: 10 عدد; حاشیه پایین: 16 پیروز; > 

  با استفاده از عملکرد CSS Calc () ، حاشیه از Flex-Basis کسر می شود. همانطور که می بینید ، این راه حل آسان نیست. آنچه من ترجیح می دهم موارد زیر است:

  • لپ تاپ چپ را به مورد شبکه اضافه کنید
  • یک حاشیه سمت چپ منفی را با همان مقدار بالشتک چپ به والدین شبکه اضافه کنید.

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

  . Grid-4  نمایش دادن: خم شدن; خمیده: بسته بندی کردن; حاشیه چپ: -10px; > . grid__item  خمیدگی: 25 ٪; دست چپ: 10 عدد; حاشیه پایین: 16 پیروز; > 

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

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

  

  . نویسندگی  حاشیه چپ: -4px; حاشیه راست: -4px; > . داستان  دست چپ: 4 عدد; حق بالشتک: 4 عدد; > 

  فاصله در سیستم های شبکه - شبکه CSS

  و اکنون ، به قسمت هیجان انگیز! با شبکه CSS ، می توانید فاصله را به راحتی با Grid-Gap اضافه کنید. همچنین ، نیازی نیست که به عرض آیتم شبکه و نه چیز حاشیه پایین اهمیت دهید. CSS Grid همه چیز را برای شما انجام می دهد!

  . Grid-4  نمایش دادن: توری; ستونهای شبکه: 1fr 1fr 1fr; شبکه: 1REM; > 

  و این است! آیا این خیلی ساده تر و سر راست نیست؟

  شکاف در تقاضا

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

  

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

  کارد: نه(:آخرین فرزند)  حاشیه پایین: 16 پیروز; > @رسانه ها (ممتاز: 700px)  کارد: نه(:آخرین فرزند)  حاشیه پایین: 0; حاشیه چپ: 1REM; > > 

  راحت نیست ، درست است؟در مورد این یکی چی؟

  کارد و چنگال  نمایش دادن: توری; ستونهای شبکه: 1fr; شبکه: 1REM; > @رسانه ها (ممتاز: 700px)  کارد و چنگال  ستونهای شبکه: 1fr 1fr; > > 

  و انجام شده است! بسیار ، بسیار ساده تر

  برخورد با حاشیه پایین

  بیایید تصور کنیم که اجزای زیر پشته می شوند. هر مؤلفه حاشیه پایین دارد.

  

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

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

  راه حل 1 - CSS: انتخاب کننده نیست

  منزل: نه(:آخرین فرزند)  حاشیه پایین: 16 پیروز; > 

  راه حل 2 - ترکیب خواهر و برادر مجاور

  منزل + منزل  حاشیه: 16 پیروز; > 

  در حالی که راه حل شماره 1 وسوسه انگیز است ، اشکالاتی زیر دارد:

  

   

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

   

  با توجه به راه حل شماره 2 ، مسئله ویژگی CSS ندارد. با این حال ، فقط با یک ستون ستون کار خواهد کرد.

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

  . نویسندگی  حاشیه پایین: -16px; > 

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

  مؤلفه کارت

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

  

  (ببخشید ، اگر گرسنه هستید)

  آیا می توانید به این فکر کنید که از کجا فاصله در این کارت استفاده می شود؟شکل زیر را مشاهده کنید.

  

   کلاس ="کارت">  href ="#">  کلاس ="کارت __THUMB"> SRC ="Food. jpg" alt ="" />  کلاس ="کارت __content">  کلاس ="کارت __title">رول دارچین  کلاس ="کارت __author">سرآشپز احمد  کلاس ="کارت __rating">4. 9   کلاس ="کارت __meta">    

  . card__ content  لایه گذاری: 10 عدد; > 

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

  کارد __title, کارد __author, . card__rating  حاشیه پایین: 10 عدد; > 

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

  کارد __meta  در بالای بالشتک: 10 عدد; از صدر مرز: 1 px جامد #e9e9e9; > 

  اوهاین مرز به دلیل بالشتک اعمال شده به عنصر والدین . Card__Content به لبه ها نمی چسبد.

  

  بله ، شما آن را حدس زده اید! حاشیه منفی رفع است.

  کارد __meta  در بالای بالشتک: 10 عدد; از صدر مرز: 1 px جامد #e9e9e9; لبه: 0 -10px; > 

  اوه ، دوباره! چیزی اشتباه استمحتوا به لبه ها گیر کرده است!

  

  برای حل مسئله ، محتوای باید از لبه های چپ و راست استفاده شود (اوه ، به نظر می رسد یک کلمه جدید است).

  کارد __meta  لایه گذاری: 10 عدد 10 عدد 0 10 عدد; از صدر مرز: 1 px جامد #e9e9e9; لبه: 0 -10px; > 

  

  محتوای مقاله

  من معتقدم که این یک مورد بسیار متداول است. از آنجا که محتوای مقاله از CMS (سیستم مدیریت محتوا) تهیه می شود یا به طور خودکار از یک فایل Markdown تولید می شود که در آن امکان اضافه کردن کلاس برای عناصر وجود ندارد.

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

   کلاس ="بسته بندی"> عناصر فاصله در CSS  انواع فاصله  SRC ="فاصل ه-1. png" alt ="" />   موارد استفاده  مؤلفه کارت  SRC ="استفاده از کارت-کار ت-2. png" alt ="" />  

  برای اینکه آنها خوب به نظر برسند ، فاصله باید سازگار باشد و با دقت مورد استفاده قرار گیرد. من برخی از سبک ها را از Type-Scale. com وام گرفتم.

  h1, h2, h3, h4, h5  لبه: 2. 75REM 0 1. 05REM; > h1  حاشیه: 0; > IMG  حاشیه پایین: 0. 5rem; > 

  

  اگر یک

  به عنوان مثال ، عنوان "انواع فاصله" ، حاشیه حاشیه

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

  فقط در مورد حاشیه

  من دوست دارم این را "درست در مورد" بنامم ، زیرا این به معنای واقعی کلمه است. Mockup زیر را در نظر بگیرید:

  

  عناصر وقتی نزدیک به یکدیگر هستند خوب به نظر نمی رسند. من آنها را با Flexbox ساختم. این تکنیک "بسته بندی تغییر تراز" نامیده می شود که من در مورد نام آن از ترفندهای CSS آموختم.

  منزل  نمایش دادن: خم شدن; خمیده: بسته بندی کردن; > 

  آنها در یک خط جدید به پایان می رسند که اندازه نمای کوچکتر باشد. به زیر مراجعه کنید:

  

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

  

  حالت های نوشتن CSS

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

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

  

  . نویسندگی  / * برای تهیه عنوان و دستور العمل در همان خط */ نمایش دادن: خم شدن; > . عنوان  حالت نوشتن: عمودی; حاشیه راست: 16 پیروز; > 

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

  و من فکر می کنم این برای موارد استفاده کافی است. بیایید به برخی از مفاهیم جالب برویم!

  محاصره اجزای سازنده

  یک سیستم طراحی بزرگ حاوی اجزای زیادی است. آیا منطقی است که حاشیه ها را مستقیماً به آنها اضافه کنیم؟

  مثال زیر را در نظر بگیرید.

  

   کلاس ="دکمه">ذخیره تغییرات  کلاس ="دکمه دکمه دکمه">دور کردن 

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

  . دکمه + . دکمه  حاشیه چپ: 1REM; > 

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

  با استفاده از مؤلفه های انتزاعی

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

  

   کلاس ="لیست">  کلاس ="لیست __item">  کلاس ="دکمه">ذخیره تغییرات   کلاس ="لیست __item">  کلاس ="دکمه دکمه دکمه">دور کردن   

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

  . لیست کردن  نمایش دادن: خم شدن; آیتم های تراز: مرکز; حاشیه چپ: -1REM; / * حاشیه سمت چپ را برای عنصر اول لغو می کند */ > . list__item  حاشیه چپ: 1REM; > 

  و این است! حتی بیشتر ، استفاده از این مفاهیم در هر کار قاب JavaScript بسیار آسان است. مثلا:

    ذخیره تغییرات  طرح کلی>دور کردن  

  و ابزار JavaScript مورد استفاده شما باید هر مورد را در عنصر خاص خود ببندد.

  اجزای فضا

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

  بیایید فرض کنیم که یک بخش به حاشیه 24px از سمت چپ نیاز دارد ، با توجه به این محدودیت ها:

  • حاشیه را نمی توان مستقیماً در این مؤلفه استفاده کرد ، زیرا این یک سیستم طراحی از قبل ساخته شده است.
  • باید انعطاف پذیر باشد. فاصله ممکن است در صفحه X باشد ، اما در Y.

  من برای اولین بار در هنگام بازرسی از طراحی جدید Facebook CSS متوجه این موضوع شدم.

  

  این با عرض سبک درون خطی است: 16px. تنها هدف آن اضافه کردن فضایی بین لبه سمت چپ و بسته بندی است.

  به نقل از این کتاب بازی React:

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

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

  چالش هایی با اجزای فاصله

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

  • چگونه یک مؤلفه فضا عرض یا ارتفاع خود را در داخل والدین می گیرد؟چگونه در طرح های افقی در مقابل عمودی کار خواهد کرد؟به عنوان مثال: یک فاصله در داخل پشته در مقابل یک فاصله که فضای چپ را اضافه می کند.
  • آیا باید آنها را بر اساس نوع نمایشگر والدین خود سبک کنیم (فلکس ، شبکه)

  بیایید سؤالات فوق را یک به یک حل کنیم.

  اندازه قطعات فاصله

  می توان یک فضا ایجاد کرد که تغییرات و تنظیمات مختلفی را بپذیرد. من یک توسعه دهنده JavaScript نیستم ، اما فکر می کنم آنها آن را غرفه می نامند. موارد زیر را از syled-system. com در نظر بگیرید:

  ما یک فاصله بین هدر و یک بخش داریم.

  سرتیتر /> فضا mb=4> /> بخش /> 

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

  خم شدن> لوگو /> فضا m="خودکار" /> ارتباط دادن>بوق/ارتباط دادن> ارتباط دادن>غرفه/ارتباط دادن> /فلکس> 

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

  موارد زیر را مشاهده کنید. آیا انعطاف پذیری را در آنجا می بینید؟

  خم شدن> لوگو /> ارتباط دادن>بوق/ارتباط دادن> ارتباط دادن>غرفه/ارتباط دادن> فضا m="خودکار" /> ارتباط دادن>غرفه/ارتباط دادن> /فلکس> 

  خوب ، در این حالت ، یک ظاهر طراحی شده باید تغییر کند. آیا انعطاف پذیری را در آنجا می بینید؟

  برای بخش اندازه ، یک فاصله می تواند بر اساس والدین خود اندازه گیری شود. برای موارد فوق ، شاید شما بتوانید یک غرفه به نام Grow ایجاد کنید که محاسبه می کند برای رشد Flex: 1 در CSS.

  خم شدن> فضا رشد="1" /> /فلکس> 

  با استفاده از عناصر شبه

  ایده دیگری که من در مورد آن فکر کردم استفاده از عناصر شبه برای ایجاد یک فضا است.

  منزل:بعد از  محتوا: ""; نمایش دادن: مسدود کردن; قد: 32px; > 

  شاید بتوانیم به جای یک عنصر جدا شده برای آن ، گزینه ای برای اضافه کردن فضا از طریق یک عنصر شبه داشته باشیم؟مثلا:

  سرتیتر فضا="زیر" نوع="شبه" طول="32"> لوگو /> ارتباط دادن>خانه/ارتباط دادن> ارتباط دادن>در باره/ارتباط دادن> ارتباط دادن>مخاطب/ارتباط دادن> /سرتیتر> 

  تا امروز ، من در پروژه های خود از اجزای Spacer استفاده نکرده ام ، اما من مشتاقانه منتظر استفاده هایی هستم که می توانم از آنها استفاده کنم.

  توابع ریاضی CSS: حداقل () ، حداکثر () ، گیره ()

  آیا حاشیه پویا امکان پذیر است؟به عنوان مثال برای تعیین حاشیه ای که دارای حداقل و حداکثر مقدار بر اساس عرض Viewport باشد. پاسخ بله است! ما میتوانیم. به تازگی ، عملکردهای ریاضی CSS در Firefox 75 پشتیبانی می شوند ، این بدان معنی است که آنها در تمام مرورگرهای اصلی مطابق با Caniuse پشتیبانی می شوند.

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

  . نویسندگی  نمایش دادن: توری; ستونهای شبکه: تکرار(3, 1fr); شبکه: حداقل(2 ولتاکس, 32px); > 

  در اینجا همان چیزی است که حداقل (2vmax ، 32px) به این معنی است: از یک شکاف برابر با 2Vmax استفاده کنید اما نباید از 32px بروید.

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

  پایان

  این یک بسته بندی استآیا نظر دارید یا پیشنهادی دارید؟لطفا در صورت تمایل به من در @shadeed9 پینگ کنید.

  من یک کتاب الکترونیکی نوشتم

  من هیجان زده ام که به شما اطلاع دهم که من یک کتاب الکترونیکی در مورد اشکال زدایی CSS نوشتم.

  

  اگر علاقه مند هستید ، برای پیش نمایش رایگان به DebuggingCss. com بروید.< Span> آیا می توان حاشیه پویا را داشت؟به عنوان مثال برای تعیین حاشیه ای که دارای حداقل و حداکثر مقدار بر اساس عرض Viewport باشد. پاسخ بله است! ما میتوانیم. به تازگی ، عملکردهای ریاضی CSS در Firefox 75 پشتیبانی می شوند ، این بدان معنی است که آنها در تمام مرورگرهای اصلی مطابق با Caniuse پشتیبانی می شوند.