CSS padding-inline-start ਪ੍ਰਤੀਯੋਗਿਤਾ

ਵਰਣਨ ਅਤੇ ਵਰਤੋਂ

ਐਲੀਮੈਂਟ ਦੀ padding-inline-start ਗੁਣ ਰੋਜ਼ੀ ਦਿਸ਼ਾ 'ਚ ਸ਼ੁਰੂ ਤੋਂ ਬੋਰਡਰ ਤੱਕ ਦੀ ਦੂਰੀ ਦਿਸਦੀ ਹੈ。

CSS padding-inline ਅਤੇ padding-block ਗੁਣ ਨੂੰ padding-topਅਤੇpadding-bottomਅਤੇpadding-left ਅਤੇ padding-right ਬਹੁਤ ਸਮਾਨ ਹਨ ਪਰ padding-inline ਅਤੇ padding-block ਗੁਣ ਰੋਜ਼ੀ ਦਿਸ਼ਾ ਅਤੇ ਬਲਕ ਦਿਸ਼ਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。

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

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਰੋਜ਼ੀ ਦਿਸ਼ਾ 'ਚ ਸ਼ੁਰੂਆਤ ਵਾਲੇ ਸਥਾਨ 'ਚ ਪੱਡਿੰਗ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

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

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਵੱਲੋਂ <div> ਐਲੀਮੈਂਟ ਦੇ direction ਗੁਣ ਮੁੱਲ ਨੂੰ rtl ਦੇ ਰੂਪ 'ਚ ਸੈਟ ਕਰਨ 'ਚ ਰੋਜ਼ੀ ਦਿਸ਼ਾ ਲੋਕਲ ਦਿਸ਼ਾ ਹੈ।ਨਤੀਜਾ ਇਹ ਹੈ ਕਿ ਐਲੀਮੈਂਟ ਦੀ ਸ਼ੁਰੂਆਤ ਵਾਲਾ ਸਥਾਨ ਵੱਲੋਂ ਸੱਜੇ ਪਾਸੇ ਜਾ ਕੇ ਵੱਲੋਂ ਹੋ ਜਾਂਦਾ ਹੈ:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੰਥ

padding-inline-start: auto|value|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲਤਵੀ
length

ਪਿਕਸੈਲ (px), ਪਾਇਨਟ (pt), ਸੈਂਟੀਮੀਟਰ (cm) ਆਦਿ ਦੇ ਰੂਪ 'ਚ ਦੂਰੀ ਨਿਰਧਾਰਿਤ ਕਰੋ।ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਹੈ。

ਦੇਖੋ:سی ایس ایس یونٹ.
% ਪਿਤਾ ਐਲੀਮੈਂਟ ਦੇ ਸਬੰਧ ਵਿੱਚ ਰੋਜ਼ੀ ਦਿਸ਼ਾ 'ਚ ਪ੍ਰਤੀਸ਼ਤ ਦੂਰੀ ਨਿਰਧਾਰਿਤ ਕਰੋ。
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲਤਵੀ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial.
inherit ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤ ਕਰੋ।ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਬੰਧਤਾਂ:CSS ڈائریکشن اپریٹر

ਸਬੰਧਤਾਂ:CSS padding-inline ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS padding-inline-end ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS padding-bottom ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS padding-left ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS padding-right ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS padding-top ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਬੰਧਤਾਂ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ