CSS margin-inline ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

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

margin-inline کیوالیفائی، سطر کی سمت پر شروع اور بند کی بیرونی فاصلہ کا تعین کرتی ہے، یہ درج ذیل کیوالیفائیوں کی چھوٹی کیوالیفائی ہے:

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

اگر margin-inline کیوالیفائی دو ویلائی اہلیت ہیں:

margin-inline: 10px 50px;
  • شروع ہونے کی وجہ سے بیرونی فاصلہ 10 پی ایکس ہے
  • بند ہونے کی وجہ سے بیرونی فاصلہ 50 پی ایکس ہے

اگر margin-inline کیوالیفائی ایک ویلائی اہلیت ہے:

margin-inline: 10px;
  • ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਬਾਹਰਮੁੱਖ ਸਾਰੇ 10px ਹਨ

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

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

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸਾਲਾਈ ਦਿਸ਼ਾ 'ਤੇ ਦੋਵੇਂ ਪਾਸੇ ਦੇ ਬਾਹਰਮੁੱਖ ਸੈਟ ਕਰੋ:

div {
  margin-inline: 35px;
}

ਖੁਦ ਮੁਸਕਾਨ ਕਰੋ

ਉਦਾਹਰਣ 2

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

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

ਖੁਦ ਮੁਸਕਾਨ ਕਰੋ

ਉਦਾਹਰਣ 3

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

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

ਖੁਦ ਮੁਸਕਾਨ ਕਰੋ

CSS ਗਰੇਫਿਕਸ਼ਨ

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

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲਤਵੀ ਮੁੱਲ।ਐਲੀਮੈਂਟ ਦਾ ਮੂਲਤਵੀ ਮਾਰਜਿਨ-ਇਨਲਾਈਨ ਮੁੱਲ。
length

ਮਾਰਜਿਨ-ਇਨਲਾਈਨ ਨੂੰ px, pt, cm ਆਦਿ ਦੇ ਅਧਾਰ 'ਤੇ ਸੈਟ ਕਰੋ।ਨੈਗਾਟਿਵ ਮੁੱਲਾਂ ਦੀ ਅਪੀਲ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

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

ਸਬੰਧਤ ਪੰਨੇ

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

ਸਲਾਹਦਾਰੀਃCSS margin-inline-end ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਲਾਹਦਾਰੀਃCSS margin-inline-start ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਲਾਹਦਾਰੀਃCSS margin-bottom ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀਃCSS margin-inline ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਲਾਹਦਾਰੀਃCSS margin-left ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਲਾਹਦਾਰੀਃCSS margin-right ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਲਾਹਦਾਰੀਃCSS margin-top ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

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