CSS padding-inline پرپروپتی

تعلیم اور استعمال

عنصر کی padding-inline یعنی اس کی رینک کی داخلی سمت میں، فلیپ سے مطلب کی فاصلت اور اس کی سائز کی سمت میں ہے۔ یہ درج ذیل کیئنداں کی کیئنداں کی نمائندگی کرتی ہیں:

padding-inline کیئنداں کی قیمتیں مختلف طریقوں سے سیٹ کی جاسکتی ہیں:

اگر padding-inline کیتابی دو کیئنداں ہوں:

padding-inline: 10px 50px;
  • شروع‌داتی کی ایندن پیدائش 10 پی‌ایکس
  • پایان‌داتی کی ایندن پیدائش 50 پی‌ایکس

如果 padding-inline 属性有一个值:

padding-inline: 10px;
  • ਸ਼ੁਰੂ ਅਤੇ ਅੰਤ ਦੀ ਪੈਡਿੰਗ ਦਾ ਮੁੱਲ 10px ਹੈ

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

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

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਇਨਲਾਈਨ ਦਿਸ਼ਾ ਦੋਵੇਂ ਤਰਫ਼ ਵਿੱਚ ਪੈਡਿੰਗ ਸੈਟ ਕਰੋ:

div {
  padding-inline: 50px;
}

ਆਪਣੇ ਅਨੁਭਵ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

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

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

ਆਪਣੇ ਅਨੁਭਵ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

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

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

ਆਪਣੇ ਅਨੁਭਵ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੇਫਿਕਸਿਜ਼ਮ

padding-inline: auto|value|ਮੂਲ ਮੁੱਲ|ਇਨਹੈਰਿਟ;

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

ਮੁੱਲ ਵਰਣਨ
ਆਟੋ ਮੂਲ ਮੁੱਲ
length

px, pt, cm ਆਦਿ ਆਕਾਰ ਇਕਾਈਆਂ ਨਾਲ ਦੂਰੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ. ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਨੂੰ ਮਨਜ਼ੂਰ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਦੇਖੋ:CSS ਯੂਨਿਟ.

% ਪੁਰਾ ਪਿੱਛੇ ਵਿੱਚ ਪਿਛਲੇ ਤੱਤ ਦੇ ਆਕਾਰ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਰੂਪ ਵਿੱਚ ਦੂਰੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
ਮੂਲ ਮੁੱਲ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ. ਦੇਖੋ: ਮੂਲ ਮੁੱਲ.
ਇਨਹੈਰਿਟ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇਨਹੈਰਿਟ ਕਰੋ. ਦੇਖੋ: ਇਨਹੈਰਿਟ.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: ਆਟੋ
ਮੁਢਲੀਅਤ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥਾ ਹੈ. ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ.
ਵਰਜਨ: ਸੀਐੱਸਐੱਸ3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸਿਜ਼ਮ: object.style.paddingInline="100px 20px"

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

ਸਟੇਬਲ ਵਿੱਚ ਦਿਸਾਈ ਦੀ ਆਈਡੈਂਟੀਫਾਈਡ ਵਰਜਨ ਦਾ ਨਿਸ਼ਾਨ ਹੈ ਜਿਸ ਨੇ ਇਸ ਵਿਸ਼ੇਸ਼ ਅਤਿਰਿਕਤ ਸਮਰੱਥਾ ਨੂੰ ਪੂਰਾ ਕੀਤਾ ਹੈ。

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀਃCSS ڈائریکشن اٹری بیوٹ

ਸਲਾਹਦਾਰੀਃCSS padding-inline-end پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS padding-inline-start پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS padding-bottom پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS padding-left پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS padding-right پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS padding-top پرپروپتی

ਸਲਾਹਦਾਰੀਃCSS writing-mode ਪ੍ਰਾਪਰਟੀ