CSS inset ਪ੍ਰਾਪਰਟੀ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

inset ਪ੍ਰਤੀਯੋਗੀ ਪ੍ਰਤੀ ਮੂਲ ਪ੍ਰਤੀਯੋਗੀ ਦਰਮਿਆਨ ਦੂਰੀ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

注意：要使该属性生效，必须指定 position 属性。

inset 属性是以下属性的简写形式：

inset ਖੱਬੇ

ਸੱਜੇ

inset: 15px 30px 60px 90px;
  • ਖੱਬੇ ਦੀ ਦੂਰੀ 90px ਹੈ
  • ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਮੁੱਲ ਦੇ ਰੂਪ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਸਥਾਪਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਤਿੰਨ ਮੁੱਲ ਹਨ:
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਚਾਰ ਮੁੱਲ ਹਨ:

ਸੱਜੇ ਦੀ ਦੂਰੀ 30px ਹੈ

inset: 15px 30px 60px;
  • ਖੱਬੇ ਦੀ ਦੂਰੀ 90px ਹੈ
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਦੋ ਮੁੱਲ ਹਨ:
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਤਿੰਨ ਮੁੱਲ ਹਨ:

ਉੱਪਰ ਦੀ ਦੂਰੀ 15px ਹੈ

ਉਦਾਹਰਣ 2
  • ਹੇਠਾਂ ਦੀ ਦੂਰੀ 60px ਹੈ
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਦੋ ਮੁੱਲ ਹਨ:

ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਦੀ ਦੂਰੀ 15px ਹੈ

ਸੱਜੇ ਅਤੇ ਖੱਬੇ ਦੀ ਦੂਰੀ 30px ਹੈ
  • ਜੇਕਰ inset ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਇੱਕ ਮੁੱਲ ਹੈ:

inset: 10px;

ਸਾਰੇ ਦਿਸ਼ਾਵਾਂ ਦੀ ਦੂਰੀ 10px ਹੈ

ਵਿਸਥਾਰ

div {
  ਉਦਾਹਰਣ 1
}

ਸਵੈਲਰਾਜ ਕਰੋ

ਸਥਾਨਾਂ ਦੀ ਦੂਰੀ ਨੂੰ ਪੈਰੈਂਟ ਤੋਂ 35 ਪਿਕਸਲ ਦੀ ਦੂਰੀ ਨੂੰ ਸਥਾਪਤ ਕਰੋ:

ਜੋ <div> ਤੋਂ ਦੂਰੀ ਦੇ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਨੂੰ ਸਥਾਪਤ ਕਰੋ: inset inset: 35px;

div {
  ਉਦਾਹਰਣ 2
}

ਸਵੈਲਰਾਜ ਕਰੋ

inset: 15px 30px;

ਜੋ <div> ਤੋਂ ਦੂਰੀ ਦੇ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਨੂੰ ਸਥਾਪਤ ਕਰੋ: inset ਉਦਾਹਰਣ 3

div {
  inset: 15px 30px 60px;
}

ਸਵੈਲਰਾਜ ਕਰੋ

ਉਦਾਹਰਣ 4

ਜੋ <div> ਤੋਂ ਦੂਰੀ ਦੇ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਨੂੰ ਸਥਾਪਤ ਕਰੋ: inset ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਨੂੰ ਪੈਰੈਂਟ ਤੋਂ ਦੂਰੀ 15 ਪਿਕਸਲ ਤੋਂ, ਸੱਜੇ ਤੋਂ 30 ਪਿਕਸਲ, ਨੀਚੇ ਤੋਂ 60 ਪਿਕਸਲ ਅਤੇ ਖੱਬੇ ਤੋਂ 90 ਪਿਕਸਲ ਦੀ ਦੂਰੀ ਨੂੰ ਸਥਾਪਤ ਕਰੋ:

div {
  inset: 15px 30px 60px 90px;
}

ਸਵੈਲਰਾਜ ਕਰੋ

ਸੀਐੱਸਐੱਸ ਗਰੇਫਿਕਸ

inset: auto|ਮੁੱਲ|ਮੂਲ ਰੂਪ|ਵਿਰਾਸਤੀਕਰਣ;

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

ਮੁੱਲ ਵਰਣਨ
ਆਪਣੇ ਪੈਰੈਂਟ ਤੋਂ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਪਸ ਲੈਣਾ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ: ਮੂਲ ਮੁੱਲ
ਮੁੱਲ ਸਥਾਈ ਇਕਾਈ (ਜਿਵੇਂ ਕਿ px, pt, cm ਆਦਿ) ਦੇ ਰੂਪ ਵਿੱਚ ਦੂਰੀ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਵਾਲੇ ਇਸਤੇਮਾਲ ਕਰੋ।ਨਿਊਨਤਮ ਮੁੱਲ ਦੀ ਸਹਿਮਤੀ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ:سی ایس ایس یونٹ.
% ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਰੂਪ ਵਿੱਚ ਦੂਰੀ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਵਾਲੇ ਇਸਤੇਮਾਲ ਕਰੋ, ਜੋ ਪੈਰੈਂਟ ਤੋਂ ਸਬੰਧਤ ਅਕਸ਼ ਉੱਤੇ ਆਪਣੇ ਆਕਾਰ ਦੇ ਮੁਕਾਬਲੇ ਹੈ।
ਮੂਲ ਰੂਪ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਮੂਲ ਵਿੱਚ ਸਥਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ: ਮੂਲ ਰੂਪ.
ਵਿਰਾਸਤੀਕਰਣ ਆਪਣੇ ਪੈਰੈਂਟ ਤੋਂ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਪਸ ਲੈਣਾ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ: ਵਿਰਾਸਤੀਕਰਣ.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਵਿੱਚ ਸਥਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ ਆਪਣੇ ਪੈਰੈਂਟ ਤੋਂ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਪਸ ਲੈਣਾ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ:
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਨਿਰਮਾਣ: ਸਮਰਥਨ ਹੈ।ਜ਼ਿਕਰਦੇ ਹੋਏ ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ.
ਵਰਜਨ: ਸੀਐੱਸਐੱਸ3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ

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

ਸਟੇਬਲ ਵਿੱਚ ਦਿਸਾਈ ਗਿਆ ਵਰਜਨ ਇਹ ਪਹਿਲਾ ਸਾਰਵਤਰੀ ਬਰਾਉਜ਼ਰ ਹੈ ਜਿਸ ਨੇ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸਮਰਥਨ ਕੀਤੀ ਹੈ。

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

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS ਸਥਾਨਾਂਤਰਣ

ਸਥਾਨਾਂਤਰਣ:CSS position ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰਣ:CSS bottom ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰਣ:CSS left ਪ੍ਰਾਪਰਟੀ

ਸਥਾਨਾਂਤਰਣ:CSS right ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰਣ:CSS top ਪ੍ਰਾਪਰਟੀ