ਬਲਾਕ ਅਤੇ ਇਨਲਾਈਨ ਤੱਤਾਂ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

Question

Accepted Answer

ਹਰੇਕ ਤੱਤ ਦਾ ਇੱਕ ਡਿਫ਼ਾਲਟ **display** ਵਿਵਹਾਰ ਹੁੰਦਾ ਹੈ ਜੋ ਇਹ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਲੇਆਉਟ ਵਿੱਚ ਕਿਵੇਂ ਵਗਦਾ ਹੈ। - **ਬਲਾਕ** ਤੱਤ **ਨਵੀ ਲਾਈਨ** ਤੇ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ ਅਤੇ **ਪੂਰੀ ਉਪਲਬਧ ਚੌੜਾਈ** ਲੈਂਦੇ ਹਨ। ਉਹ ਚੌੜਾਈ/ਉਚਾਈ ਅਤੇ ਸਭ ਮਾਰਜਿਨ/ਪੈਡਿੰਗ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ। ਉਦਾਹਰਣਾਂ: `

`, `

`, `
`, `
`। - ਇਨਲਾਈਨ ਤੱਤ ਇੱਕ ਲਾਈਨ ਦੇ ਅੰਦਰ ਵਗਦੇ ਹਨ, ਸਿਰਫ ਉਨ੍ਹਾਂ ਦੀ ਸਮਗ੍ਰੀ ਦੇ ਬਰਾਬਰ ਚੌੜੇ, ਅਤੇ ਚੌੜਾਈ/ਉਚਾਈ ਅਤੇ ਉੱਤਰ/ਥੱਲੇ ਮਾਰਜਿਨ ਨੂੰ ਨਜ਼ਰ ਅੰਦਾਜ਼ ਕਰਦੇ ਹਨ। ਉਦਾਹਰਣਾਂ: ``, ``, ``, ``। ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## ਇੱਕ ਵਿਹਾਰਕ ਸਮੱਸਿਆ ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` ਇਨਲਾਈਨ ਤੱਤ ਉੱਤੇ `width`/`height` ਸੈੱਟ ਕਰਨਾ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। ਹੱਲ ਇਸਦਾ display ਬਦਲਣਾ ਹੈ: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — ਦੋਵਾਂ ਦਾ ਸਭ ਕੁਝ `inline-block` ਪਾਠ ਵਹਾਓ ਵਿੱਚ ਬੈਠਦਾ ਹੈ (ਇੱਕ ਦੂਜੇ ਦੇ ਬਾਜ਼ੂ) ਅਤੇ* ਚੌੜਾਈ/ਉਚਾਈ/ਮਾਰਜਿਨ ਦਾ ਸਨਮਾਨ ਕਰਦਾ ਹੈ — ਨੇਵ ਆਈਟਮ, ਬੈਜ, ਜਾਂ ਇੱਕ ਕਤਾਰ ਵਿੱਚ ਵਿਵਸਥਿਤ ਬਟਨਾਂ ਲਈ ਉਤਮ। ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## ਇਸ ਦਾ ਮਹੱਤਵ ਕੀ ਹੈ ਡਿਫ਼ਾਲਟ display ਨੂੰ ਸਮਝਣਾ ਵਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ `` ਉਚਾਈ ਕਿਉਂ ਨਹੀਂ ਲੈਂਦਾ, `
`s ਕਿਉਂ ਸਟੈਕ ਹੁੰਦੇ ਹਨ, ਅਤੇ `inline-block`, `flex`, ਜਾਂ `grid` ਤੋਂ ਕਦੋਂ ਬਦਲਣਾ ਹੈ। ਇਹ ਇਸ ਦੀ ਨਿਵੇੜ ਹੈ ਕਿ ਕਿਸ ਤਰਾਂ ਤੱਤ ਕਿਸੇ ਵੀ ਲੇਆਉਟ ਸਿਸਟਮ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਵਿਚ ਕਰਦੇ ਹਨ।