أنواع التدفق والعرض (display: block, inline, inline-block, none)

css displayblock inlineinline-blockdisplay none css

الشرح

خاصية `display` هي أهم خاصية في CSS — تتحكم في كيفية تدفق العنصر وحجمه ومشاركته في التخطيط.

**block:** - يأخذ سطراً كاملاً - يقبل width, height, margin, padding - أمثلة: div, p, h1-h6, ul, li, header, footer

**inline:** - يتدفق داخل النص كالكلمات - لا يقبل width وheight - margin وpadding أفقيان فقط تؤثران في التخطيط - أمثلة: span, a, strong, em, img

**inline-block:** - يتدفق كـ inline لكن يقبل width وheight وكل الـ margin/padding - مفيد للأزرار والشارات

**none:** - يُخفي العنصر تماماً ويُزيله من التدفق (لا يحجز مساحة)

**table / table-row / table-cell:** - يُعطي سلوك HTML Table بدون وسوم Table

**contents:** - يجعل الحاوية غير مرئية بصرياً ولا يحجز حد لها (أبناؤها يتصرفون كأبناء مباشرين للجد)

syntax

1	/* تحويل الروابط لأزرار block */
2	nav a { display: block; padding: 12px 16px; }
3
4	/* شارة inline-block */
5	.badge {
6	display: inline-block;
7	padding: 2px 8px;
8	border-radius: 999px;
9	}
10
11	/* إخفاء عنصر */
12	.hidden { display: none; }

مثال 1: قائمة أفقية بـ inline-block

قائمة أفقية بـ inline-block

1	.nav-list { list-style: none; padding: 0; margin: 0; }
2	.nav-list li { display: inline-block; }
3	.nav-list a {
4	display: inline-block;
5	padding: 8px 16px;
6	color: white;
7	text-decoration: none;
8	border-radius: 6px;
9	transition: background 0.2s;
10	}
11	.nav-list a:hover { background: rgba(255,255,255,0.15); }

—display: none يزيل العنصر من التخطيط أيضاً، أما visibility: hidden فيُخفيه ويحتفظ بمساحته.
—inline-block هو بديل Flexbox القديم — في المشاريع الجديدة استخدم flex بدلاً.
—display: contents مفيد عند الحاجة لعناصر لفّ غير مرئية في Flex/Grid.

الدرس السابق

المحاذاة داخل الشبكة (gap, justify-items, align-items, justify-content, align-content)

الدرس التالي

التحكم في التموضع (position: static, relative, absolute, fixed, sticky)