نوشتن نظر کلیک کنید

جلسه بعدی جلسه قبلی

CSS – درون‌آمد (Inset)

آخرین بروزرسانی: ۶ فروردین ۱۴۰۳

ویژگی CSS inset یک مختصر برای ویژگی‌های دیگر CSS از جمله top، right، bottom و/یا left است.

این ویژگی دارای سینتکس چندمقداری مانند ویژگی margin است.

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

مقادیر ممکن ویژگی CSS inset همان مجموعه مقادیر ویژگی left را می‌پذیرد که به شرح زیر است:

<length> – می‌تواند مقدار منفی، صفر یا مثبت باشد.

<percentage> – درصد عرض مخزن.

auto – مقدار پیش‌فرض. مرورگر موقعیت left را محاسبه می‌کند.

inherit – مقدار مشخص‌شده توسط عنصر والد.

اعمال بر روی همه عناصر موقعیت‌دار.

سینتکس:

inset = <'top'>{1,4}  

/*  values */
inset: 5px; /* value applied to all edges */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */
   
/* s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;
   
/* Keyword value */
inset: auto;

Four Length Values

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با چهار مقدار طولی استفاده کنید تا مقادیر offset بالا، راست، پایین و چپ را مشخص کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با چهار مقدار طولی، مقادیر offset بالا، راست، پایین و چپ برای عنصر span تعیین شده است. این مقادیر به ترتیب به صورت 25 پیکسل (بالا)، 45 پیکسل (راست)، 35 پیکسل (پایین) و 15 پیکسل (چپ) است.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 45px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 4 values</span>
   </div>
</body>
</html>

Three Length Values

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با سه مقدار طولی استفاده کنید تا مقادیر offset بالا، راست، پایین و چپ را مشخص کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با سه مقدار طولی، مقادیر offset بالا، راست و چپ برای عنصر span تعیین شده است. این مقادیر به ترتیب به صورت 25 پیکسل (بالا)، 35 پیکسل (راست) و 15 پیکسل (چپ) است، در حالی که مقدار offset پایین به صورت پیش فرض است و به ارزش auto تنظیم می‌شود.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 3 values</span>
   </div>
</body>
</html>

Two Length Values

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با دو مقدار طولی استفاده کنید تا مقادیر offset بالا، راست، پایین و چپ را مشخص کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با دو مقدار طولی، مقادیر offset بالا و راست برای عنصر span تعیین شده است. این مقادیر به ترتیب به صورت 25 پیکسل (بالا) و 35 پیکسل (راست) است، در حالی که مقادیر offset پایین و چپ به صورت پیش فرض به مقدار auto تنظیم می‌شوند.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 values</span>
   </div>
</body>
</html>

One Length Value

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با یک مقدار طولی استفاده کنید تا مقادیر offset بالا، راست، پایین و چپ را مشخص کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با یک مقدار طولی، مقادیر offset برای عنصر span به طور یکنواخت در همه جهات (بالا، راست، پایین و چپ) به مقدار 35 پیکسل تنظیم شده است.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 1 value</span>
   </div>
</body>
</html>

Percentage Value

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با دو مقدار درصدی استفاده کنید تا مقادیر offset بالا، راست، پایین و چپ را مشخص کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با دو مقدار درصدی، مقادیر offset برای عنصر span به صورت درصدی از عرض و ارتفاع مخصوص کانتینر تنظیم شده است.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25% 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 % values</span>
   </div>
</body>
</html>

Mixed Values

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25% 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 % values</span>
   </div>
</body>
</html>

auto Value

این کد CSS نشان می‌دهد که چگونه می‌توانید ویژگی inset را با استفاده از مقدار auto، که مقدار پیش‌فرض است و مرورگر محاسباتی را برای موقعیت top، right، bottom و left تعیین می‌کند، استفاده کنید.

در این مثال، یک عنصر div ساخته شده است که دارای یک عنصر span با کلاس inset-ex است که درون آن قرار دارد. با استفاده از ویژگی inset با مقدار auto، موقعیت offset برای عنصر span به صورت خودکار تعیین می‌شود.

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: vertical-lr;
      position: absolute;
      inset: auto;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - auto</span>
   </div>
</body>
</html>

Related Properties

این جدول تمام ویژگی‌های مرتبط با CSS inset را نشان می‌دهد:

ویژگی	توضیح
bottom	موقعیت عمودی یک عنصر موقعیت‌دار در پایین.
left	موقعیت افقی یک عنصر موقعیت‌دار در سمت چپ.
right	موقعیت افقی یک عنصر موقعیت‌دار در سمت راست.
top	موقعیت عمودی یک عنصر موقعیت‌دار در بالا.
margin	مختصری برای تنظیم حاشیه یک عنصر.
inset-block	مشخص می‌کند که چگونه شروع و پایان موقعیت‌های منطقی بلوکی یک عنصر است.
inset-inline	مشخص می‌کند که چگونه شروع و پایان موقعیت‌های منطقی بلوکی یک عنصر در جهت خطی است.

CSS – درون‌آمد (Inset)

Four Length Values

Three Length Values

Two Length Values

One Length Value

Percentage Value

Mixed Values

auto Value

Related Properties

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

CSS – درون‌آمد (Inset)

Four Length Values

Three Length Values

Two Length Values

One Length Value

Percentage Value

Mixed Values

auto Value

Related Properties

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

Python – محدود کردن داده (MongoDB Limit)

Python – بروزرسانی (MongoDB Update)

Python – حذف کالکشن (MongoDB Drop Collection)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید