مقدمه‌ای بر مفهوم inset-inline
سلام! امروز می‌خواهیم درباره ویژگی inset-inline که در CSS به کار می‌رود صحبت کنیم. اگر از طراحی وب لذت می‌برید و به دنبال روش‌هایی هستید که کار را برایتان ساده و سریعتر کند، این ویژگی واقعاً می‌تواند کمک‌کننده باشد.
فرض کنید می‌خواهید عنصری را به طور دقیق درون یک ظرف (container) جاگذاری کنید. معمولاً تا به حال از ویژگی‌های margin یا padding در جلو انداختن یا عقب کشیدن عناصر استفاده می‌کردید، اما ویژگی inset-inline به شما این امکان را می‌دهد که دقیقاً موقعیت یک عنصر را در محور inline تنظیم کنید، یعنی جهت نوشتار.
ویژگی inset-inline اصولاً حالت دو گانه‌ای از ویژگی‌های left و right به حساب می‌آید اما با دقتی بیشتر برای زبان‌ها یا قالب‌های نگارش مختلف که به زبان راست به چپ (RTL) یا چپ به راست (LTR) وابسته‌اند.
این ویژگی برای پروژه‌هایی که نیازمند متن‌هایی در زبان‌های مختلف هستند بسیار کارآمد است زیرا به شما کمک می‌کند تا شباهت‌های قالب بندی برای تمامی زبان‌ها را به سادگی و به درستی حفظ کنید.
استفاده از ویژگی inset-inline همراه با مثال
<style>
.box {
background-color: lightblue;
inset-inline: 10px 20px;
}
</style>
<div class="box">متن نمونه</div>
توضیحات کد
<style> ← شروع برچسب انتخابگر CSS.box ← انتخابگر عنصر بر اساس کلاسbackground-color: lightblue; ← تنظیم رنگ پس‌زمینه عنصر به آبی کمرنگinset-inline: 10px 20px; ← تنظیم فضاهای سمت چپ و راست عنصر به ترتیب 10px و 20px</style> ← پایان برچسب انتخابگر CSS<div class="box"> ← تعریف شروع یک عنصر div با کلاس 'box'متن نمونه ← متن مورد نظر که در عنصر قرار می‌گیرد</div> ← پایان عنصر div