CSS inset-inline-start ਪ੍ਰਾਪਰਟੀ

定义和用法

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

ਧਿਆਨ:要使此属性生效，必须指定 position position

CSS ਦੇ inset-inline ਅਤੇ inset-block ਗੁਣ ਕ੍ਰਿਸਟੋਫਰ ਦੇ top、bottom、left ਅਤੇ right ਗੁਣ ਬਹੁਤ ਹੀ ਸਮਾਨ ਹਨ, ਪਰ inset-block ਅਤੇ inset-inline ਗੁਣ ਬਲਕ ਦਿਸ਼ਾ ਅਤੇ ਲਾਈਨ ਦਿਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。

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

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸਥਿਤ ਕੀਤੇ <div> ਪ੍ਰਤੀਅਤਮ ਦੇ ਸਥਾਨ 'ਤੇ ਲਾਈਨ ਦਿਸ਼ਾ ਦੀ ਦੂਰੀ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

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

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3

ਜਦੋਂ <div> ਪ੍ਰਤੀਅਤਮ ਦਾ direction ਗੁਣ ਮੁੱਲ ਵਿੱਚ rtl ਦੇ ਰੂਪ ਵਿੱਚ ਸੈਟ ਹੋਣ ਤੇ ਲਾਈਨ ਦਿਸ਼ਾ ਸੱਜੇ ਤੋਂ ਵੱਲ ਹੁੰਦੀ ਹੈ।ਇਸ ਵਿੱਚ ਇੱਕ ਛੋਟੀ ਗਲਤੀ ਹੈ, ਇਹ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ 'ਫਲਾਈਟ ਦੇ ਸ਼ੁਰੂਆਤੀ ਅੰਗ ਹੁਣ ਸੱਜੇ ਵਿੱਚ ਬਣਿਆ ਹੋਇਆ ਹੈ (ਕਿਉਂਕਿ rtl ਵਿੱਚ ਸ਼ੁਰੂਆਤੀ ਅੰਗ ਹੁਣ ਸੱਜੇ ਵਿੱਚ ਹੈ, ਪਰ ਮੂਲ ਦੀ ltr ਸਥਿਤੀ ਨਾਲ ਸਮੇਂ ਸਮੇਂ ਕੰਟੰਟ ਪੁਰਜਾ ਵਾਪਸ ਫਲਾਈਟ ਵਿੱਚ ਬਦਲ ਗਈ ਹੈ)':

div {
  inset-inline-start: 50px;
  direction: rtl;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰਿੱਖ

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

ਗੁਣ ਮੁੱਲ

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਸਟੇਬਲ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਇਹ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਖਰੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS ਪਾਥਨਾਮਾ

ਸਲਾਹਦਾਰੀਕਰਨ:CSS position پراپرٹی

ਸਲਾਹਦਾਰੀਕਰਨ:CSS ڈائریکشن پرپرٹی

ਸਲਾਹਦਾਰੀਕਰਨ:CSS ਵਰਟਿੰਗ-ਮੋਡ ਪ੍ਰਾਪਰਟੀ