HTML ਵ੍ਹਾਈਟਸਪੇਸ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ

CSS ਦੇ ਨਾਲ HTML ਵਿੱਚ ਤੱਤ ਦੇ ਖਾਲੀ ਸਥਾਨ ਅਤੇ ਭੌਤਿਕ ਵੱਖ ਬਣਾਉਣੇ

ਖਾਲੀ ਥਾਂ ਬਣਾਉਣਾ ਅਤੇ HTML ਵਿਚਲੇ ਤੱਤ ਦੇ ਭੌਤਿਕ ਵੱਖ ਹੋਣ ਨੂੰ ਸ਼ੁਰੂਆਤ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰ ਲਈ ਸਮਝਣਾ ਮੁਸ਼ਕਿਲ ਹੋ ਸਕਦਾ ਹੈ. ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ HTML ਕੋਲ ਇੱਕ ਜਾਇਦਾਦ ਹੈ ਜਿਸ ਨੂੰ "ਖਾਲੀ ਥਾਂ ਦੀ ਗੰਦਗੀ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਭਾਵੇਂ ਤੁਸੀਂ ਆਪਣੇ HTML ਕੋਡ ਵਿੱਚ 1 ਸਪੇਸ ਜਾਂ 100 ਟਾਈਪ ਕਰਦੇ ਹੋ, ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਆਪਣੇ ਆਪ ਹੀ ਇੱਕ ਸਪੇਸ ਤੇ ਖਾਲੀ ਥਾਂ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ. ਇਹ ਮਾਈਕਰੋਸਾਫਟ ਵਰਡ ਵਰਗੇ ਪ੍ਰੋਗਰਾਮਾਂ ਤੋਂ ਵੱਖਰੀ ਹੈ ਜੋ ਦਸਤਾਵੇਜ ਸਿਰਜਣਹਾਰਾਂ ਨੂੰ ਉਸ ਦਸਤਾਵੇਜ਼ ਦੇ ਵੱਖਰੇ ਸ਼ਬਦਾਂ ਅਤੇ ਹੋਰ ਤੱਤਾਂ ਨੂੰ ਵੱਖ ਕਰਨ ਲਈ ਕਈ ਥਾਂ ਜੋੜਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ.

ਇਹ ਨਹੀਂ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਸਪੇਸਿੰਗ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ.

ਇਸ ਲਈ, ਤੁਸੀਂ ਵੈਬ ਪੇਜ ਤੇ ਦਿਖਾਈ ਗਈ ਐਚਟੀਐਮਐਲਟੀ ਵਿਚ ਖਾਲੀ ਥਾਂ ਕਿਵੇਂ ਪਾਉਂਦੇ ਹੋ? ਇਹ ਲੇਖ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਕੁਝ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ.

CSS ਨਾਲ HTML ਵਿੱਚ ਸਪੇਸ

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

CSS ਵਿੱਚ, ਤੁਸੀਂ ਤਾਰਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਸਪੇਸ ਜੋੜਨ ਲਈ ਮਾਰਜਿਨ ਜਾਂ ਪੈਡਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਟੈਕਸਟ-ਇੰਡੈਂਟ ਪ੍ਰੋਪਰਟੀ ਟੈਕਸਟ ਦੇ ਸਾਹਮਣੇ ਸਪੇਸ ਜੋੜਦੀ ਹੈ, ਜਿਵੇਂ ਪੈਰਾਗ੍ਰਾਫਟ ਇਨਡੈਂਟੇਟਿੰਗ ਲਈ.

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

ਪੀ {
ਪਾਠ-ਇੰਡੈਂਟ: 3em;
}

HTML ਵਿਚਲੀਆਂ ਥਾਵਾਂ: ਤੁਹਾਡੇ ਪਾਠ ਦੇ ਅੰਦਰ

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਟੈਕਸਟ ਵਿੱਚ ਇੱਕ ਵਾਧੂ ਸਪੇਸ ਜਾਂ ਦੋ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਗੈਰ-ਟੁੱਟਣ ਵਾਲੀ ਜਗ੍ਹਾ ਦਾ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ.

ਇਹ ਅੱਖਰ ਇੱਕ ਮਿਆਰੀ ਸਪੇਸ ਅੱਖਰ ਦੀ ਤਰਾਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੇਵਲ ਇਹ ਹੀ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਅੰਦਰ ਢਹਿ-ਢੇਰੀ ਨਹੀਂ ਹੁੰਦਾ.

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਕਿ ਕਿਵੇਂ ਪਾਠ ਦੀ ਇੱਕ ਲਾਈਨ ਦੇ ਅੰਦਰ ਪੰਜ ਖਾਲੀ ਸਥਾਨ ਜੋੜਨੇ:

ਇਸ ਪਾਠ ਵਿੱਚ ਇਸ ਵਿੱਚ ਪੰਜ ਵਾਧੂ ਖਾਲੀ ਸਥਾਨ ਹਨ

HTML ਦਾ ਉਪਯੋਗ ਕਰਦਾ ਹੈ:

ਇਹ ਟੈਕਸਟ ਹੈ & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ਇਸ ਵਿੱਚ ਪੰਜ ਵਾਧੂ ਖਾਲੀ ਸਥਾਨ

ਤੁਸੀਂ ਵਾਧੂ ਲਾਈਨ ਬ੍ਰੇਕਸ ਜੋੜਨ ਲਈ
ਟੈਗ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ.

ਇਸ ਵਾਕ ਦੇ ਅੰਤ ਵਿਚ ਪੰਜ ਸਤਰਾਂ ਹਨ.

ਐਚਟੀਐਮ ਵਿੱਚ ਸਪੇਸਿੰਗ ਇੱਕ ਬੁਰਾ ਵਿਚਾਰ ਕਿਉਂ ਹੈ

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

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਾਰੇ ਸਟਾਈਲ ਅਤੇ ਸਪੇਸਿੰਗ ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਰੀ ਸਾਈਟ ਲਈ ਉਹਨਾਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਬਦਲਣਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸਟਾਇਲ ਸ਼ੀਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਹੈ.

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

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜੇ ਤੁਸੀਂ ਸੜਕ ਦਾ ਨਿਰਣਾ ਕਰਦੇ ਹੋ ਕਿ ਇਹ ਦੂਰੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜਾਂ ਬਹੁਤ ਘੱਟ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਇਸਨੂੰ ਥੋੜ੍ਹਾ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੀ ਪੂਰੀ ਵੈਬਸਾਈਟ ਵਿਚ ਹਰੇਕ ਇਕ ਪੈਰਾ ਦੀ ਸੋਧ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ. ਬੱਸ ਮਿਹਰਬਾਨੀ!

ਇਸ ਸਪੇਸਿੰਗ ਐਲੀਮੈਂਟ ਨੂੰ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਜੋੜਨ ਦੀ ਬਜਾਏ, CSS ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਪੀ {
ਪੈਡਿੰਗ-ਥੱਲਾ: 20 ਪੈਕਸ;
}

CSS ਦੀ ਉਹ ਇੱਕ ਲਾਈਨ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਦੇ ਪੈਰਿਆਂ ਦੇ ਹੇਠਾਂ ਸਪੇਸ ਜੋੜਦੀ ਹੈ. ਜੇ ਤੁਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਉਸ ਸਪੇਸ ਨੂੰ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਇੱਕ ਲਾਈਨ ਨੂੰ (ਆਪਣੇ ਪੂਰੇ ਸਾਈਟ ਦੇ ਕੋਡ ਦੀ ਬਜਾਏ) ਸੰਪਾਦਨ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਜਾਣ ਲਈ ਵਧੀਆ ਹੋ!

ਹੁਣ, ਜੇ ਤੁਹਾਨੂੰ ਆਪਣੀ ਵੈਬਸਾਈਟ ਦੇ ਇੱਕ ਭਾਗ ਵਿੱਚ ਇੱਕ ਸਪੇਸ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਤਾਂ
ਟੈਗ ਜਾਂ ਇੱਕ ਸਿੰਗਲ ਨਾਨ-ਬਰੇਕਿੰਗ ਸਪੇਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸੰਸਾਰ ਦਾ ਅੰਤ ਨਹੀਂ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਸਾਵਧਾਨ ਰਹਿਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.

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