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
این کد 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>
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 | مشخص میکند که چگونه شروع و پایان موقعیتهای منطقی بلوکی یک عنصر در جهت خطی است. |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام