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

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

margin-block ਪ੍ਰਤੀਯੋਗੀ ਬਲਕ ਦਿਸ਼ਾ ਉੱਤੇ ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਕਿਨਾਰੇ ਦਾ ਮਾਰਜਿਨ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ, ਇਹ ਹੇਠ ਲਿਖੇ ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਸ਼ਰਟਕੈਟ ਹੈ:

margin-block ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਕੀਮਤ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਸੈਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

ਜੇਕਰ margin-block ਪ੍ਰਤੀਯੋਗੀ ਦੋ ਕੀਮਤਾਂ ਹਨ:

margin-block: 10px 50px;
  • ਸ਼ੁਰੂਆਤੀ ਕਿਨਾਰੇ ਦਾ ਬਾਹਰੀ ਮਾਰਜਿਨ 10px ਹੈ
  • ਸਮਾਪਤ ਬਰਾਹਮਕ ਦੀ ਮੈਰਜਿਨ 50px ਹੁੰਦੀ ਹੈ

ਜੇਕਰ margin-block ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਇੱਕ ਮੁੱਲ ਹੈ:

margin-block: 10px;
  • ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਬਰਾਹਮਕ ਦੀ ਮੈਰਜਿਨ 10px ਹੁੰਦੀ ਹੈ

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

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

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਬਲਾਕ ਦਿਸ਼ਾ 'ਤੇ ਦੋਵੇਂ ਪਾਸੇ ਦੇ ਬਾਹਰਲੇ ਮੈਰਜਿਨ ਨੂੰ ਸੈਟ ਕਰੋ:

div {
  margin-block: 35px;
}

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

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

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

ਆਪਣੇ ਆਪ ਨੂੰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੇਫਿਕਸਟ੍ਰੀਕਸ਼ਨ

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

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

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

px, pt, cm ਆਦਿ ਅਕਾਰਾਂ ਨਾਲ margin-block ਨਾਮ ਦੱਸੋ।ਨਕਾਰਾਤਮਕ ਮੁੱਲਾਂ ਦੀ ਆਗਿਆ ਹੈ。

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਥਾਨਾਂਤਰCSS margin-block-end ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰCSS margin-block-start ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰCSS margin-bottom ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਥਾਨਾਂਤਰCSS margin-inline ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਥਾਨਾਂਤਰCSS margin-left ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਥਾਨਾਂਤਰCSS margin-right ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਥਾਨਾਂਤਰCSS margin-top ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਥਾਨਾਂਤਰCSS ਵਰਟਿੰਗ-ਮੋਡ ਪ੍ਰਾਪਰਟੀ