CSS margin-block-start ਪ੍ਰਾਪਰਟੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

margin-block-start ਗੁਣ ਨੂੰ ਬਲਕ ਦਿਸ਼ਾ ਸ਼ੁਰੂ 'ਚ ਬਾਹਰੀ ਮੂਰਤੀ ਸੈਟ ਕਰਦੇ ਹਨ。

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

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

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਬਲਕ ਦਿਸ਼ਾ ਸ਼ੁਰੂ ਦੇ ਬਾਅਦ ਬਾਹਰੀ ਮੂਰਤੀ ਸੈਟ ਕਰੋ:

div {
  margin-block-start: 35px;
}

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

ਉਦਾਹਰਣ 2

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

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-start: 50px;
}

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

ਸੀਐੱਸਐੱਸ ਗਰੰਟਰਾਸ਼

margin-block-start: auto|length|initial|inherit;

ਗੁਣ ਮੁੱਲ

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-block ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-block-end ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-bottom ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-inline ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-left ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-right ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀਆਂ:CSS margin-top ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਲਾਹਦਾਰੀਆਂ:CSS writing-mode ਪ੍ਰਾਪਰਟੀ