Style padding ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

padding ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈਟ ਜਾਂ ਵਾਪਸ ਕਰਦੀ ਹੈ ਕਿ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰੂਨੀ ਬਰਾਬਰੀ

ਇਹ ਪ੍ਰਤੀਯੋਗਿਤਾ ਇੱਕ ਤੋਂ ਚਾਰ ਮੁੱਲ ਲੈ ਸਕਦੀ ਹੈ:

margin ਪ੍ਰਤੀਯੋਗਿਤਾ ਅਤੇ ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਸਾਰੇ ਐਲੀਮੈਂਟ ਦਰਮਿਆਨ ਸਪੇਸ ਜੋੜਦੇ ਹਨ। ਪਰ, ਵੱਖਰਾਈ ਇਹ ਹੈ ਕਿ margin ਕਿਨਾਰਿਆਂ ਦਰਮਿਆਨ ਸਪੇਸ ਜੋੜਦਾ ਹੈ, ਜਦਕਿ padding ਐਲੀਮੈਂਟ ਦੇ ਕਿਨਾਰਿਆਂ ਅੰਦਰ ਸਪੇਸ ਜੋੜਦਾ ਹੈ

  • ਇੱਕ ਮੁੱਲ, ਉਦਾਹਰਨ ਲਈ: div {padding: 50px} - ਸਾਰੇ ਚਾਰ ਕਿਨਾਰਿਆਂ ਉੱਤੇ 50px ਅੰਦਰੂਨੀ ਬਰਾਬਰੀ ਹੋਵੇਗੀ
  • ਦੋ ਮੁੱਲ, ਉਦਾਹਰਨ ਲਈ: div {padding: 50px 10px} - ਉੱਪਰ ਅਤੇ ਨੀਚੇ ਅੰਦਰੂਨੀ ਬਰਾਬਰੀ 50px ਹੋਵੇਗੀ, ਆਮ ਅਤੇ ਬਾਹਰੀ ਅੰਦਰੂਨੀ ਬਰਾਬਰੀ 10px ਹੋਵੇਗੀ
  • ਤਿੰਨ ਮੁੱਲ, ਉਦਾਹਰਣ: div {padding: 50px 10px 20px} - ਉੱਪਰ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 50px, ਸੱਦੇ ਅਤੇ ਸੱਜੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 10px, ਨੀਚੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 20px
  • ਚਾਰ ਮੁੱਲ, ਉਦਾਹਰਣ: div {padding: 50px 10px 20px 30px} - ਉੱਪਰ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 50px, ਸੱਜੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 10px, ਨੀਚੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 20px, ਸੱਦੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ 30px

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਿਆ:CSS ਦੀ ਅੰਦਰੂਨੀ ਪਾਦਾਂ

CSS ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼:ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ

ਇਨਸਟੈਂਸ ਨਾਲ:

ਉਦਾਹਰਣ 1

ਸੈਟ <div> ਇਲਾਕੇ ਦੀ ਪੈਡਿੰਗ:

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

<div> ਇਲਾਕੇ ਦੇ ਸਾਰੇ ਚਾਰ ਪਾਸੇ ਦੀ ਪੈਡਿੰਗ ਨੂੰ "25px" ਬਦਲੋ:

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 3

ਵਾਪਸ <div> ਇਲਾਕੇ ਦੀ ਪੈਡਿੰਗ ਦਿਸ਼ਾ:

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 4

margin ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ padding ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਅਲਗ ਹੋਣਾ:

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

ਸਵੈ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਗਰੰਥਕਾਰੀ

ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਪਸ ਕਰੋ:

object.style.padding

ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਸੈਟ ਕਰੋ:

object.style.padding = "%|length|initial|inherit"

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

ਮੁੱਲ ਵਰਣਨ
% ਪੈਡਿੰਗ ਨੂੰ ਮਾਤਾ ਇਲਾਕੇ ਦੀ ਚੌੜਾਈ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ。
length ਲੰਬਾਈ ਇਕਾਈ ਨਾਲ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ。
initial ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial.
inherit ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਇਲਾਕੇ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ।ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: 0
ਵਾਪਸ ਮੁੱਲ: ਮਾਨਕ ਪਾਠ, ਇਲਾਕੇ ਦੀ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ。
CSS ਸੰਸਕਰਣਾਂ: CSS1

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

ਕਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਕਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ