ਹਰੇਕ ਤੱਤ ਦਾ ਇੱਕ ਡਿਫ਼ਾਲਟ display ਵਿਵਹਾਰ ਹੁੰਦਾ ਹੈ ਜੋ ਇਹ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਲੇਆਉਟ ਵਿੱਚ ਕਿਵੇਂ ਵਗਦਾ ਹੈ।
<div>, <p>, <h1>, <section>, <ul>।<span>, <a>, <strong>, <em>।<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
ਇਨਲਾਈਨ ਤੱਤ ਉੱਤੇ width/height ਸੈੱਟ ਕਰਨਾ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। ਹੱਲ ਇਸਦਾ display ਬਦਲਣਾ ਹੈ:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block ਪਾਠ ਵਹਾਓ ਵਿੱਚ ਬੈਠਦਾ ਹੈ (ਇੱਕ ਦੂਜੇ ਦੇ ਬਾਜ਼ੂ) ਅਤੇ ਚੌੜਾਈ/ਉਚਾਈ/ਮਾਰਜਿਨ ਦਾ ਸਨਮਾਨ ਕਰਦਾ ਹੈ — ਨੇਵ ਆਈਟਮ, ਬੈਜ, ਜਾਂ ਇੱਕ ਕਤਾਰ ਵਿੱਚ ਵਿਵਸਥਿਤ ਬਟਨਾਂ ਲਈ ਉਤਮ।
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
ਡਿਫ਼ਾਲਟ display ਨੂੰ ਸਮਝਣਾ ਵਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ <span> ਉਚਾਈ ਕਿਉਂ ਨਹੀਂ ਲੈਂਦਾ, <div>s ਕਿਉਂ ਸਟੈਕ ਹੁੰਦੇ ਹਨ, ਅਤੇ inline-block, flex, ਜਾਂ grid ਤੋਂ ਕਦੋਂ ਬਦਲਣਾ ਹੈ।
ਇਹ ਇਸ ਦੀ ਨਿਵੇੜ ਹੈ ਕਿ ਕਿਸ ਤਰਾਂ ਤੱਤ ਕਿਸੇ ਵੀ ਲੇਆਉਟ ਸਿਸਟਮ ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਸਵਿਚ ਕਰਦੇ ਹਨ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ