ਸਟਾਈਲ ਮਾਰਜਿਨ ਵਿਸ਼ੇਸ਼ਤਾ

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

margin ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਏਜੰਟ ਦੇ ਬਾਹਰੀ ਮੈਗਿਨ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ ਜਾਂ ਉਸ ਨੂੰ ਵਾਪਸ ਕਰਦੀ ਹੈ。

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਤੋਂ ਚਾਰ ਮੁੱਲ ਲੈ ਸਕਦੀ ਹੈ:

  • ਇੱਕ ਮੁੱਲ ਜਿਵੇਂ: div {margin: 50px} - ਸਾਰੇ ਚਾਰ ਬਾਹਰੀ ਮੈਗਿਨ 50px ਹਨ
  • ਦੋ ਮੁੱਲ ਜਿਵੇਂ: div {margin: 50px 10px} - ਉੱਪਰ ਅਤੇ ਹੇਠ ਬਾਹਰੀ ਮੈਗਿਨ 50px ਹੈ, ਖੱਬੇ ਅਤੇ ਉੱਤਰ ਬਾਹਰੀ ਮੈਗਿਨ 10px ਹੈ
  • तीन ਮੁੱਲ ਜਿਵੇਂ: div {margin: 50px 10px 20px} - ਉੱਪਰ ਬਾਹਰੀ ਮੈਗਿਨ 50px ਹੈ, ਖੱਬੇ ਅਤੇ ਉੱਤਰ ਬਾਹਰੀ ਮੈਗਿਨ 10px ਹੈ, ਹੇਠ ਬਾਹਰੀ ਮੈਗਿਨ 20px ਹੈ
  • ਚਾਰ ਮੁੱਲ, ਉਦਾਹਰਣਾਂ ਵਜੋਂ: div {margin: 50px 10px 20px 30px} - ਉੱਪਰੀ ਮਾਰਜਿਨ 50px, ਕੱਲ੍ਹੀ ਮਾਰਜਿਨ 10px, ਨੀਚੇ ਮਾਰਜਿਨ 20px, ਸਾਹਮਣੇ ਮਾਰਜਿਨ 30px}

margin ਗੁਣ ਅਤੇ padding ਗੁਣ ਦੋਵੇਂ ਏਲੀਮੈਂਟ ਦੇ ਚੱਕਰ ਵਿੱਚ ਸਥਾਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਪਰ ਅੰਤਰ ਇਹ ਹੈ ਕਿ margin ਬਾਹਰੀ ਫਸੀਲ ਦੇ ਚੱਕਰ ਵਿੱਚ ਸਥਾਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜਦਕਿ padding ਫਸੀਲ ਦੇ ਬਾਹਰੀ ਫਸੀਲ ਦੇ ਅੰਦਰ ਸਥਾਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。

ਇਸ ਲਈ ਵੀ ਦੇਖੋ:

CSS ਸਿੱਖਿਆ:CSS ਬਾਹਰੀ ਮਾਰਜਿਨ

CSS ਸੰਦਰਭ ਪੁਸਤਕ:margin ਗੁਣ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸੈੱਟ <div> ਏਲੀਮੈਂਟ ਦੇ ਸਾਰੇ ਚਾਰ ਮਾਰਜਿਨ:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

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

ਉਦਾਹਰਣ 2

<div> ਏਲੀਮੈਂਟ ਦੇ ਸਾਰੇ ਚਾਰ ਮਾਰਜਿਨ ਨੂੰ "25px" ਬਦਲੋ:

document.getElementById("myDiv").style.margin = "25px";

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

ਉਦਾਹਰਣ 3

ਮੁੱਲ ਵਾਪਸੀ <div> ਏਲੀਮੈਂਟ ਦੇ ਮਾਰਜਿਨ:

alert(document.getElementById("myDiv").style.margin);

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

ਉਦਾਹਰਣ 4

margin ਗੁਣ ਅਤੇ padding ਗੁਣ ਦਾ ਅੰਤਰ:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

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

ਸਿਧਾਂਤ

ਮਾਰਜਿਨ ਗੁਣ ਵਾਪਸੀ ਕਰੋ:

object.style.margin

ਮਾਰਜਿਨ ਗੁਣ ਸੈੱਟ ਕਰੋ:

object.style.margin = "%|length|auto|initial|inherit"

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
% ਮਾਤਾ ਏਲੀਮੈਂਟ ਦੀ ਚੌਡਾਈ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਨਾਲ ਮਾਰਜਿਨ ਨੂੰ ਸੈੱਟ ਕਰੋ।
length ਮਾਰਜਿਨ ਨੂੰ ਲੰਬਾਈ ਇਕਾਈ ਦੇ ਰੂਪ ਵਿੱਚ ਸੈੱਟ ਕਰੋ।
auto ਬਰਾਉਜ਼ਰ ਨੇ ਮਾਰਜਿਨ (ਸਾਰੇ ਚਾਰ ਮਾਰਜਿਨ ਬਰਾਬਰ ਹੋਣਗੇ) ਨੂੰ ਸੈੱਟ ਕਰਦੇ ਹਨ (ਬਰਾਉਜ਼ਰ ਸੈੱਟਿੰਗਜ਼ ਮਾਰਜਿਨ)。
initial ਇਸ ਗੁਣ ਨੂੰ ਮੂਲਤਬੀ ਮੁੱਲ ਤੇ ਸੈੱਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਏਲੀਮੈਂਟ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਇਨਹੈਰਿਟ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲਤਬੀ ਮੁੱਲ: 0
ਵਾਪਸੀ ਮੁੱਲ: ਸਟਰਿੰਗ, ਜੋ ਕਿ ਏਲੀਮੈਂਟ ਦੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ。
CSS ਸੰਸਕਰਣ: CSS1

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

ਚਰਮੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੀ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ