CSS ਪੈਡਿੰਗ ਬਾਰੇ ਸੰਖੇਪ ਜਾਣਕਾਰੀ

CSS ਪੈਡਿੰਗ , CSS ਬਾਕਸ ਮਾਡਲ ਦੀ ਇਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ. ਇਹ ਲ਼ੌਰਥਲੈਂਡ ਦੀ ਜਾਇਦਾਦ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਦੇ ਚਾਰਾਂ ਪਾਸਿਆਂ ਦੇ ਦੁਆਲੇ ਪੈਡਿੰਗ ਸੈਟ ਕਰਦੀ ਹੈ. CSS ਪੇਡਿੰਗ ਨੂੰ ਲਗਪਗ ਹਰ HTML ਟੈਗ ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਕੁਝ ਟੇਬਲ ਟੈਗਾਂ ਦੇ ਇਲਾਵਾ). ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੱਤ ਦੇ ਸਾਰੇ ਚਾਰ ਪਾਸੇ ਦੇ ਵੱਖਰੇ ਮੁੱਲ ਦਾ ਹੋ ਸਕਦਾ ਹੈ.

CSS ਪੈਡਿੰਗ ਜਾਇਦਾਦ

ਸ਼ੈਲਰਥੈਡ CSS ਚਿਣਨ ਦੀ ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਸਵਾਮੀ "ਟਰੌਬਲੀ" (ਜਾਂ "ਟਰਾਈਬਬਲੀ" ਤੁਹਾਡੇ ਲਈ ਸਟਾਰ ਟ੍ਰੈਕ ਪ੍ਰਸ਼ੰਸਕਾਂ) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਉੱਪਰਲੇ , ਸੱਜੇ , ਥੱਲੇ ਅਤੇ ਖੱਬੀ ਲਈ ਖੜ੍ਹਾ ਹੈ, ਅਤੇ ਇਹ ਸ਼ੈਲਥਲੈਂਡ ਦੀ ਜਾਇਦਾਦ ਵਿੱਚ ਤੁਹਾਡੇ ਦੁਆਰਾ ਸੈਟ ਕੀਤੇ ਗਏ ਪੈਡਿੰਗ ਚੌੜਾਈ ਦੇ ਆਰਡਰ ਦਾ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ. ਉਦਾਹਰਣ ਲਈ:

ਪੈਡਿੰਗ: ਉੱਪਰ ਸੱਜੇ ਪਾਸੇ ਹੇਠਾਂ ਖੱਬੇ; ਪੈਡਿੰਗ: 1 ਪੈਕਸ 2 ਪੈਕਸ 3 ਪੈਕਸ 6 ਪੈਕਸ;

ਜੇ ਤੁਸੀਂ ਉੱਪਰ ਸੂਚੀਬੱਧ ਮੁੱਲ ਵਰਤੇ ਹਨ, ਤਾਂ ਇਹ ਹਰ ਇੱਕ ਐਲੀਮੈਂਟ ਐਲੀਮੈਂਟ ਦੇ ਹਰ ਪਾਸਿਓ ਵੱਖਰੇ ਪੈਡਿੰਗ ਮੁੱਲ ਨੂੰ ਲਾਗੂ ਕਰੇਗਾ ਜੋ ਤੁਸੀਂ ਇਸਨੂੰ ਲਾਗੂ ਕਰ ਰਹੇ ਹੋ. ਜੇ ਤੁਸੀਂ ਸਾਰੇ ਚਾਰਾਂ ਪਾਸਿਆਂ ਤੇ ਇੱਕੋ ਪੈਡਿੰਗ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ CSS ਨੂੰ ਸੌਖਾ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਕੇਵਲ ਇੱਕ ਵੈਲਯੂ ਲਿਖ ਸਕਦੇ ਹੋ:

ਪੈਡਿੰਗ: 12 ਪੈਕਸ;

CSS ਦੀ ਉਹ ਲਾਈਨ ਨਾਲ, 12 ਪਿਕਸਲ ਪੈਡਿੰਗ ਤੱਤ ਦੇ ਸਾਰੇ 4 ਪੱਖਾਂ 'ਤੇ ਲਾਗੂ ਹੋਵੇਗੀ.

ਜੇ ਤੁਸੀਂ ਪੈਡਿੰਗ ਨੂੰ ਉੱਪਰ ਅਤੇ ਹੇਠਲੇ ਅਤੇ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਦੋ ਮੁੱਲ ਲਿਖ ਸਕਦੇ ਹੋ:

ਪੈਡਿੰਗ: 24 ਪੈਕਸ 48 ਪੈਕਸ;

ਪਹਿਲੀ ਵੈਲਯੂ (24px) ਸਿਖਰ ਤੇ ਨੀਚੇ ਤੇ ਲਾਗੂ ਹੋਵੇਗੀ, ਜਦੋਂ ਕਿ ਦੂਜਾ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਤੇ ਲਾਗੂ ਹੋਵੇਗਾ.

ਜੇ ਤੁਸੀਂ ਤਿੰਨ ਮੁੱਲ ਲਿਖਦੇ ਹੋ, ਤਾਂ ਇਹ ਉਤਲੇ ਪੈਡਿੰਗ (ਖੱਬੇ ਅਤੇ ਸੱਜੇ) ਉਸੇ ਤਰ੍ਹਾਂ ਬਣਾਏਗਾ, ਜਦੋਂ ਕਿ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਬਦਲਣਾ:

ਪੈਡਿੰਗ: ਉੱਪਰ ਸੱਜੇ ਅਤੇ ਖੱਬੇ ਤਲ; ਪੈਡਿੰਗ: 0 ਪੈਕਸ 1 ਪੈਕਸ 3 ਪੈਕਸ;

CSS ਬਾਕਸ ਮਾਡਲ ਦੇ ਅਨੁਸਾਰ, ਪੈਡਿੰਗ ਤੱਤ / ਸਮਗਰੀ ਦੇ ਸਭ ਤੋਂ ਨੇੜੇ ਹੈ. ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਮੱਗਰੀ ਨੂੰ ਚੌੜਾਈ ਜਾਂ ਉਚਾਈ ਅਤੇ ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤੇ ਗਏ ਕਿਸੇ ਵੀ ਸਰੰਡਰ ਦੇ ਮੁੱਲ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਐਲੀਮੈਂਟ ਵਿੱਚ ਪੈਡਿੰਗ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ. ਜੇਕਰ ਪੈਡਿੰਗ ਨੂੰ ਜ਼ੀਰੋ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਇਸਦੀ ਸਮਗਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਹੀ ਉਚਾਈ ਹੈ.

CSS ਪੈਡਿੰਗ ਮੁੱਲ

CSS ਪੈਡਿੰਗ ਕਿਸੇ ਗੈਰ-ਨੈਗੇਟਿਵ ਲੰਬਾਈ ਦੇ ਮੁੱਲ ਨੂੰ ਲੈ ਸਕਦਾ ਹੈ. ਮਾਪਣਾ ਨਿਸ਼ਚਿਤ ਕਰਨਾ, ਜਿਵੇਂ ਕਿ px ਜਾਂ em. ਤੁਸੀਂ ਆਪਣੇ ਪੈਡਿੰਗ ਲਈ ਪ੍ਰਤੀਸ਼ਤ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਕਿ ਤੱਤ ਦੇ ਬਣੇ ਬਲਾਕ ਦੀ ਚੌੜਾਈ ਦਾ ਪ੍ਰਤੀਸ਼ਤ ਹੋਵੇਗਾ. ਇਸ ਵਿੱਚ ਉੱਪਰ ਅਤੇ ਹੇਠਲੇ ਪੈਡਿੰਗ ਸ਼ਾਮਲ ਹਨ ਉਦਾਹਰਣ ਲਈ:

# ਕੰਟੇਨਰ {ਚੌੜਾਈ: 800px; ਉਚਾਈ: 200 ਪੈਕਸ; } # ਕੰਟੇਨਰ ਪੀ {ਚੌੜਾਈ: 400 ਪੈਕਸ; ਉਚਾਈ: 75%; ਪੈਡਿੰਗ: 25% 0; }

#container ਤੱਤ ਦੇ ਅੰਦਰ #container ਤੱਤ ਦੇ ਪੈਰਾ ਦੀ ਉਚਾਈ #container ਦੀ ਉਚਾਈ ਦਾ 75% ਅਤੇ ਸਿਖਰਲੇ ਪੈਡਿੰਗ ਲਈ 25% ਚੌੜਾਈ ਅਤੇ ਹੇਠਲੇ ਪੈਡਿੰਗ ਲਈ 25% ਚੌੜਾਈ ਹੋਵੇਗੀ. ਇਹ ਕੁੱਲ 300 + 200 + 200 = 700px ਹੈ.

CSS ਪੈਡਿੰਗ ਜੋੜਨ ਦੇ ਪ੍ਰਭਾਵ

ਬਲਾਕ-ਪੱਧਰ ਦੇ ਤੱਤ 'ਤੇ , ਪੈਡਿੰਗ ਚਾਰਾਂ ਪਾਸੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ. ਕਿਉਂਕਿ ਇਕ ਤੱਤ ਪਹਿਲਾਂ ਹੀ ਇੱਕ ਬਲਾਕ ਜਾਂ ਬਾਕਸ ਹੈ, ਇਸ ਲਈ ਪੈਡਿੰਗ ਨੂੰ ਬਾਕਸ ਸਾਈਡ ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ.

ਜਦੋਂ CSS ਪੈਡਿੰਗ ਨੂੰ ਇਨਲਾਈਨ ਇਕਾਈਆਂ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅੰਦਰਲੀ ਤੱਤ ਦੇ ਉਪਰ ਅਤੇ ਹੇਠਾਂ ਤੱਤ ਦੇ ਕੁੱਝ ਓਵਰਲੈਪਿੰਗ ਹੋ ਸਕਦੇ ਹਨ ਜੇ ਲੰਬਕਾਰੀ ਪੈਡਿੰਗ ਲਾਈਨ ਦੀ ਉਚਾਈ ਤੋਂ ਪਾਰ ਹੋ ਜਾਂਦੀ ਹੈ, ਪਰ ਇਹ ਲਾਈਨ ਦੀ ਉੱਚਾਈ ਨੂੰ ਹੇਠਾਂ ਨਹੀਂ ਧੱਕਦਾ. ਇਨਲਾਈਨ ਐਲੀਮੈਂਟ ਤੇ ਲਾਗੂ ਹੋ ਜਾਣ ਵਾਲੀ ਲੇਟਵੀ CSS ਪੈਡਿੰਗ ਐਲੀਮੈਂਟ ਦੀ ਸ਼ੁਰੂਆਤ ਅਤੇ ਐਲੀਮੈਂਟ ਦੇ ਅਖੀਰ ਵਿੱਚ ਜੋੜੇ ਜਾਣਗੇ. ਅਤੇ ਪੈਡਿੰਗ ਲਾਈਨਾਂ ਸਮੇਟ ਸਕਦੀ ਹੈ ਪਰ ਇਹ ਬਹੁ-ਲਾਈਨ ਤੱਤਾਂ ਦੀਆਂ ਸਾਰੀਆਂ ਲਾਈਨਾਂ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੋਵੇਗਾ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਮਲਟੀ-ਲਾਈਨ ਇਨ-ਲਾਈਨ ਸਮੱਗਰੀ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਇੰਡੰਟ ਕਰਨ ਲਈ ਪੈਡਿੰਗ ਦੀ ਵਰਤੋਂ ਨਾ ਕਰ ਸਕੋ.

ਨਾਲ ਹੀ, CSS2.1 ਵਿੱਚ, ਤੁਸੀਂ ਕੰਟੇਨਰ ਬਲਾਕ ਨਹੀਂ ਬਣਾ ਸਕਦੇ, ਜਿੱਥੇ ਚੌੜਾਈ ਚੌੜਾਈ (ਜਾਂ ਪੈਡਿੰਗ ਚੌੜਾਈ) ਲਈ ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਨਾਲ ਇੱਕ ਐਲੀਮੈਂਟ ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ. ਜੇ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਦੇ ਹੋ ਤਾਂ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦਾ. ਬ੍ਰਾਉਜ਼ਰ ਅਜੇ ਵੀ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ, ਪਰੰਤੂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨਤੀਜਿਆਂ ਨੂੰ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜੋ ਤੁਸੀਂ ਆਸ ਕਰਦੇ ਹੋ. ਜੇ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸੋਚਦੇ ਹੋ, ਇਹ ਸਮਝ ਆਉਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਕੰਟੇਨਰ ਦੇ ਤੱਤ ਨੂੰ ਇਸਦੇ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਉਸਦੇ ਬਾਲ ਤੱਤਾਂ ਦੀ ਚੌੜਾਈ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ-ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਇਹ ਪ੍ਰੀ-ਪ੍ਰਭਾਸ਼ਿਤ ਚੌੜਾਈ ਨਹੀਂ ਹੈ, ਅਤੇ ਇੱਕ ਜਾਂ ਵੱਧ ਹੈ ਕੰਟੇਨਰ ਦੇ ਤੱਤ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਦੇ ਰੂਪ ਵਿੱਚ ਚੌੜਾਈ ਸੈਟ ਕੀਤੀ ਗਈ ਹੈ, ਇਸ ਨਾਲ ਕੋਈ ਜਵਾਬ ਨਹੀਂ ਹੁੰਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿਚ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਦੀ ਚੌੜਾਈ ਲਈ ਪ੍ਰਤੀਸ਼ਤ ਵਰਤਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਮੂਲ ਤੱਤ ਦੀ ਚੌੜਾਈ ਨੂੰ ਵੀ ਪ੍ਰਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ