فاصله گذاری

پادکست CSS - 013: Spacing

فرض کنید مجموعه‌ای از سه جعبه دارید که روی هم چیده شده‌اند و می‌خواهید بین آنها فاصله ایجاد کنید. برای انجام این کار در CSS چند راه فکر می کنید؟

ویژگی margin ممکن است آنچه را که نیاز دارید به شما بدهد، اما همچنین ممکن است فاصله اضافی را که نمی‌خواهید اضافه کند. به عنوان مثال، چگونه فقط فضای بین هر یک از آن عناصر را هدف قرار می دهید؟ چیزی مانند gap ممکن است در این مورد مناسب تر باشد. راه های زیادی برای تنظیم فاصله در یک UI وجود دارد که هر کدام نقاط قوت و اخطارهای خاص خود را دارند.

فاصله HTML

خود HTML روش هایی را برای عناصر فضایی فراهم می کند. عناصر <br> و <hr> به شما این امکان را می دهند که عناصر را در جهت بلوک قرار دهید، که اگر به زبانی لاتین هستید، از بالا به پایین است.

اگر از عنصر <br> استفاده می کنید، یک خط شکسته ایجاد می کند، درست مانند زمانی که کلید enter خود را در یک واژه پرداز فشار دهید.

<hr> یک خط افقی با فاصله در دو طرف ایجاد می کند که به عنوان margin شناخته می شود.

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

حاشیه

اگر می خواهید فضای بیرونی یک عنصر را اضافه کنید، از ویژگی margin استفاده می کنید. حاشیه مانند اضافه کردن یک بالشتک در اطراف عنصر است. ویژگی margin مخفف margin-top ، margin-right ، margin-bottom و margin-left است.

مختصر margin ویژگی ها را به ترتیب خاصی اعمال می کند: بالا، راست، پایین و چپ. می توانید این موارد را با مشکل به خاطر بسپارید: مشکل.

کوتاه‌نویسی margin می‌توان با یک، دو یا سه مقدار نیز استفاده کرد. افزودن یک مقدار چهارم به شما امکان می دهد هر یک از طرفین را تنظیم کنید. این موارد به شرح زیر اعمال می شوند:

• یک مقدار برای همه طرف اعمال خواهد شد. ( margin: 20px ).
• دو مقدار: مقدار اول به سمت بالا و پایین اعمال می شود و مقدار دوم برای سمت چپ و راست اعمال می شود. ( margin: 20px 40px )
• سه مقدار: مقدار اول top ، مقدار دوم left و right و مقدار سوم bottom است. ( margin: 20px 40px 30px ).

حاشیه را می توان با طول، درصد یا مقدار خودکار تعریف کرد، مانند 1em یا 20% . اگر از درصد استفاده می کنید، مقدار بر اساس عرض بلوک حاوی عنصر شما محاسبه می شود.

این بدان معناست که اگر بلوک حاوی عنصر شما 250px عرض داشته باشد و عنصر شما دارای مقدار margin 20% : هر طرف عنصر شما دارای حاشیه محاسبه شده 50px خواهد بود.

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

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

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

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

حاشیه منفی

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

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

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

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

در نگاه اول، فکر می‌کنید که پاراگراف با عنوان 5em فاصله دارد، بخشیده می‌شوید، زیرا ترکیب 2rem و 3rem به 5rem محاسبه می‌شود. از آنجایی که حاشیه عمودی فرو می ریزد ، فضا در واقع 3rem است.

فروپاشی حاشیه با انتخاب بزرگترین مقدار از دو عنصر مجاور با حاشیه عمودی در طرفین مجاور کار می کند. پایین h1 با بالای p ملاقات می کند، بنابراین بزرگترین مقدار حاشیه پایین h1 و حاشیه بالایی p انتخاب می شود. اگر h1 3.5rem حاشیه پایینی داشته باشد، فضای بین هر دو 3.5rem خواهد بود زیرا بزرگتر از 3rem است. فقط حاشیه های بلوک جمع می شوند، نه حاشیه های خطی (افقی).

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

درک خود را بررسی کنید

دانش خود را از فروپاشی حاشیه تست کنید

جلوگیری از فروپاشی حاشیه

اگر یک عنصر را کاملاً در موقعیت قرار دهید، با استفاده از position: absolute ، حاشیه دیگر جمع نمی‌شود. اگر از ویژگی float نیز استفاده کنید، حاشیه نیز از بین نمی‌رود.

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

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

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

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

بالشتک

به جای ایجاد فضا در خارج از جعبه شما، مانند margin ، ویژگی padding فضایی را در داخل جعبه شما ایجاد می کند: مانند عایق.

بسته به اینکه از کدام مدل جعبه استفاده می‌کنید - که در درس مدل جعبه توضیح داده شد - padding می‌تواند بر ابعاد کلی عنصر نیز تأثیر بگذارد.

ویژگی padding مخفف padding-top ، padding-right ، padding-bottom و padding-left است. درست مانند margin ، padding نیز دارای خواص منطقی است: padding-block-start ، padding-inline-end ، padding-block-end و padding-inline-start .

موقعیت یابی

همچنین در ماژول طرح بندی پوشش داده شده است، اگر مقداری را برای position تعیین کنید که چیزی غیر از static باشد، می توانید عناصر را با ویژگی های top ، right ، bottom و left فاصله دهید. تفاوت هایی با نحوه رفتار این مقادیر جهت دار وجود دارد:

• یک عنصر با position: relative جایگاه خود را در جریان سند حفظ می کند، حتی زمانی که این مقادیر را تنظیم کنید. آنها نسبت به موقعیت عنصر شما نیز خواهند بود.
• یک عنصر با position: absolute ، مقادیر جهت را از موقعیت والد نسبی استوار می کند.
• یک عنصر با position: fixed ، مقادیر جهت را بر اساس نمای درگاه قرار می دهد.
• یک عنصر با position: sticky فقط زمانی مقادیر جهت را اعمال می کند که در حالت docked/stuck باشد.

در ماژول خواص منطقی ، شما با ویژگی های inset-block و inset-inline آشنا می شوید که به شما امکان می دهد مقادیر جهتی را تنظیم کنید که حالت نوشتن را ارج می نهد.

هر دو ویژگی کوتاه‌نویسی هستند که مقادیر start و end را با هم ترکیب می‌کنند و به این ترتیب یک مقدار برای start و end یا دو مقدار جداگانه را می‌پذیرند.

گرید و فلکس باکس

در نهایت، هم در grid و هم در flexbox می‌توانید از ویژگی gap برای ایجاد فاصله بین عناصر فرزند استفاده کنید. ویژگی gap مختصر row-gap و column-gap است، یک یا دو مقدار را می پذیرد که می تواند طول یا درصد باشد. همچنین می توانید از کلمات کلیدی مانند unset , initial و inherit استفاده کنید . اگر فقط یک مقدار را تعریف کنید، همان gap برای سطرها و ستون ها اعمال می شود، اما اگر هر دو مقدار را تعریف کنید، مقدار اول row-gap و مقدار دوم column-gap است.

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

ایجاد فاصله ثابت

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

به عنوان مثال، می توانید متعهد شوید که 20px به عنوان یک اندازه گیری ثابت برای همه شکاف های بین عناصر - معروف به ناودان ها - استفاده کنید تا همه چیدمان ها یکدست به نظر برسند. همچنین می توانید تصمیم بگیرید که 1em به عنوان فاصله عمودی بین محتوای جریان استفاده کنید، که بر اساس font-size عنصر به فاصله ثابتی می رسد. هر چه انتخاب می کنید، باید این مقادیر را به عنوان متغیر (یا ویژگی های سفارشی CSS) ذخیره کنید تا آن مقادیر را نشانه گذاری کنید و ثبات را کمی آسان تر کنید.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

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

درک خود را بررسی کنید

دانش خود را از فاصله گذاری تست کنید