ब्लक र इनलाइन एलिमेन्टहरूमा के फरक छ?

Question

Accepted Answer

प्रत्येक एलिमेन्टको एक डिफल्ट **display** व्यवहार हुन्छ जसले लेआउटमा यो कसरी बग्छ भनेर नियन्त्रण गर्छ। - **Block** एलिमेन्टहरू **नयाँ लाइनमा** सुरु हुन्छन् र **पूरा उपलब्ध चौडाइ** लिन्छन्। तिनीहरू चौडाइ/उचाइ र सबै मार्जिन/प्याडिङ स्वीकार गर्छन्। उदाहरणहरू: `

`, `

`, `
`, `
`। - Inline एलिमेन्टहरू एक लाइन भित्र बग्छन्, केवल उनीहरूको सामग्रीजति चौडा हुन्छन्, र चौडाइ/उचाइ र माथि/तल मार्जिन अवहेलना गर्छन्। उदाहरणहरू: ``, ``, ``, ``। ```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` पाठ प्रवाहमा बैठ्छ (एकै पंक्तिमा) र* चौडाइ/उचाइ/मार्जिन सम्मान गर्छ — nav आइटेमहरू, ब्याजहरू, वा पंक्तिमा व्यवस्थित बटनहरूको लागि उत्तम। ```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` मा स्विच गर्ने भनेर व्याख्या गर्छ। यो तपाईंले कुनै पनि लेआउट प्रणाली लागू गर्नु अघि एलिमेन्टहरू कसरी व्यवस्थित हुन्छन् भन्नेको आधार हो।