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