CSS inset-inline کی ویژگی

定义和用法

inset-inline 属性设置元素在行方向上与其父元素之间的距离。

ਧਿਆਨ:اگر یہ پراپرٹی اپنا اثر دکھانوگا تو اس کا پتہ لگانا ضروری ہوتا ہے: پوزیشن پراپرٹی

inset-inline پراپرٹی مندرج پراپرٹیوں کا چوتن کا طور پر استعمال کی جاتی ہے:

inset-inline پراپرٹی کا لگنا مختلف طریقوں سے ممکن ہوتا ہے:

اگر inset-inline پراپرٹی دو کا لگن دیا ونجائی:

inset-inline: 10px 50px;
  • شروعی دوری 10px کا
  • اندرجی دوری 50px کا

如果 inset-inline 属性有一个值：

inset-inline: 10px;
  • ਪ੍ਰਾਰੰਭਿਕ ਅਤੇ ਸਮਾਪਤਿਕ ਅੰਗ ਦੀ ਦੂਰੀ 10px ਹੈ

CSS ਦੇ inset-inline ਅਤੇ inset-block ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ CSS ਦੇ top、bottom、left ਸਬੰਧਤ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ right ਵਿਸ਼ੇਸ਼ਤਾ ਬਹੁਤ ਸਮਾਨ ਹੈ, ਪਰ inset-block ਸਬੰਧਤ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ inset-inline ਵਿਸ਼ੇਸ਼ਤਾ ਬਲਕ ਦਿਸ਼ਾ ਅਤੇ ਲਾਈਨ ਦਿਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ。

ਧਿਆਨ:ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ writing-mode ਸਬੰਧਤ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ direction ਲਾਈਨ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਲਾਈਨ ਦੀ ਪ੍ਰਾਰੰਭਿਕ ਅਤੇ ਸਮਾਪਤਿਕ ਸਥਾਨ ਅਤੇ inset-inline ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਨਤੀਜਾ।ਇੰਗਲਿਸ਼ ਪੰਨਿਆਂ ਵਿੱਚ ਲਾਈਨ ਦਿਸ਼ਾ ਸੱਜੇ ਤੋਂ ਸੱਦੇ ਵੱਲ ਹੁੰਦੀ ਹੈ ਅਤੇ ਬਲਕ ਦਿਸ਼ਾ ਹੇਠਾਂ ਵੱਲ ਹੁੰਦੀ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਥਿਤ <div> ਇਲੈਕਟਰੋਨ ਨੂੰ ਲਾਈਨ ਦਿਸ਼ਾ ਵਿੱਚ ਆਪਣੇ ਮਾਪੇ ਤੋਂ ਦੂਰੀ ਸੈੱਟ ਕਰੋ:

div {
  inset-inline: 10px 50px;
}

ਸਵੈਯੰਤਰਪੂਰਵਕ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਜਦੋਂ <div> ਇਲੈਕਟਰੋਨ ਦੇ writing-mode ਜਦੋਂ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ vertical-rl ਦੇ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਲਾਈਨ ਦਿਸ਼ਾ ਹੇਠਾਂ ਵੱਲ ਹੁੰਦੀ ਹੈ।ਨਤੀਜਾ ਇਸ ਦੇ ਪ੍ਰਾਰੰਭਿਕ ਅੰਗ ਵੱਲੋਂ ਸੱਜੇ ਵੱਲ ਅਤੇ ਸਮਾਪਤਿਕ ਅੰਗ ਵੱਲੋਂ ਹੇਠਾਂ ਵੱਲ ਹੁੰਦੇ ਹਨ:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

ਸਵੈਯੰਤਰਪੂਰਵਕ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3

ਜਦੋਂ <div> ਇਲੈਕਟਰੋਨ ਦੇ direction ਜਦੋਂ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ rtl ਦੇ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਲਾਈਨ ਦਿਸ਼ਾ ਸੱਜੇ ਤੋਂ ਸੱਦੇ ਵੱਲ ਹੁੰਦੀ ਹੈ।ਨਤੀਜਾ ਇਸ ਦੇ ਪ੍ਰਾਰੰਭਿਕ ਅੰਗ ਵੱਲੋਂ ਸੱਜੇ ਵੱਲ ਅਤੇ ਸਮਾਪਤਿਕ ਅੰਗ ਵੱਲੋਂ ਸੱਦੇ ਵੱਲ ਹੁੰਦੇ ਹਨ:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

ਸਵੈਯੰਤਰਪੂਰਵਕ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਫਿਕਸ਼ਨ

inset-inline: auto|length|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲਤਵੀ ਮੁੱਲ।ਇਲੈਕਟਰੋਨ ਦੇ ਮੂਲਤਵੀ inset-inline ਦੂਰੀ
length px, pt, cm ਆਦਿ ਇਕਾਈਆਂ ਨਾਲ ਦੂਰੀ ਸੈੱਟ ਕਰੋ।ਨਿਸ਼ਚਿਤ ਮੁੱਲ ਮਿਲਾਓ।ਦੇਖੋ:سی ایس ایس یونٹ。
% ਮਾਪੇ ਤੋਂ ਸਮਾਨਤਾ ਦੀ ਪ੍ਰਤੀਸ਼ਤੀ ਦੂਰੀ ਸੈੱਟ ਕਰੋ。
initial ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲਤਵੀ ਮੁੱਲ ਨੂੰ ਸੈੱਟ ਕਰੋ।ਦੇਖੋ: initial。
inherit ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮਾਪੇ ਤੋਂ ਵਿਰਾਸਤੀਕਰਣ ਕਰੋ।ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਤਵੀ ਮੁੱਲ: auto
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਨਿਰਮਾਣ: ਸਮਰਥਨ ਹੈ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ。
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ਼ਨ: object.style.insetInline="100px 50px"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਅੰਕ ਇਸ ਸਵੱਯੰਸ਼ਾਸਤ੍ਰ ਦੀ ਪਹਿਲੀ ਸਮਰਥਨ ਵਰਜਨ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
87.0 87.0 63.0 14.1 73.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ:CSS ਸਥਾਨਾਂਤਰ

ਸਲਾਹਦਾਤਾ:CSS position ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਤਾ:CSS دیکشن پرزواری

ਸਲਾਹਦਾਤਾ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ