بلاک اور انلائن عناصر میں کیا فرق ہے؟

Question

Accepted Answer

ہر عنصر کا ایک ڈیفالٹ **display** رویہ ہوتا ہے جو اس بات کو کنٹرول کرتا ہے کہ یہ لے آؤٹ میں کیسے بہتا ہے۔ - **Block** عناصر ایک **نئی لائن** پر شروع ہوتے ہیں اور **مکمل دستیاب چوڑائی** لیتے ہیں۔ یہ width/height اور تمام margins/paddings کو قبول کرتے ہیں۔ مثالیں: `

`, `

`, `
`, `
`۔ - Inline عناصر ایک لائن کے اندر بہتے ہیں، صرف اتنی چوڑائی جتنا ان کا مواد ہے، اور width/height اور top/bottom margins کو نظر انداز کرتے ہیں۔ مثالیں: ``, ``, ``, ``۔ ```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` متن کے بہاؤ میں بیٹھا ہے (ایک دوسرے کے ساتھ) اور* width/height/margins کی توقع کرتا ہے — nav items، badges، یا بٹن کے لیے ایک قطار میں بہترین۔ ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## یہ کیوں اہم ہے ڈیفالٹ display کو سمجھنا بتاتا ہے کہ آپ کا `` اونائی کیوں نہیں لے گا، `
`s کیوں stack ہوتے ہیں، اور کب `inline-block`, `flex`, یا `grid` میں سوئچ کرنا ہے۔ یہ اس بات کی بنیاد ہے کہ عناصر کسی بھی لے آؤٹ سسٹم کو لاگو کرنے سے پہلے کیسے ترتیب دیتے ہیں۔