ما الفرق بين عناصر block و inline؟

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` على عنصر inline لا يفعل شيئاً. الحل هو تغيير عرض العرض الخاص به: ```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 الافتراضي يشرح لماذا لن يقبل `` ارتفاعاً، ولماذا تتراص `
`، ومتى تنتقل إلى `inline-block` أو `flex` أو `grid`. إنها الأساس لكيفية ترتيب العناصر قبل تطبيق أي نظام تخطيط.