خاصية Display
آخر تحديث: 2026-09-13
display خاصية Display
تُعرّف خاصية display كيف يُعرض العنصر في الصفحة، سواء تصرف كعنصر على مستوى الكتلة أو عنصر مضمّن أو استخدم نماذج تخطيط حديثة مثل Flex أو Grid. وهي من أكثر الخصائص أساسيةً وقوةً في تخطيط CSS، وقادرة على تغيير سلوك أي عنصر تقريبًا في تدفق المستند.
| الفئة | |
|---|---|
| القيمة الأولية | inline |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
display: block | inline | inline-block | flex | grid | none | table | table-row | table-cell | contents | flow | flow-root | list-item;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
block | inline | inline-block | flex | grid | none | table | table-row | table-cell | كلمة مفتاحية | أنواع عرض محددة مسبقًا. |
contents | flow | flow-root | list-item | كلمة مفتاحية | أنواع عرض أخرى. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| display | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يُزيل display:none العنصر من تدفق المستند بالكامل، دون أن يشغل مساحة أو يمكن الوصول إليه بقارئات الشاشة. وإذا أردت فقط إخفاءه بصريًا مع الاحتفاظ بمساحته، فاستخدم visibility:hidden.
مهم： على العناصر المضمّنة، لا يكون لـwidth وheight والهوامش العلوية/السفلية أي تأثير. وإذا احتجت إلى تخطيط أفقي بأبعاد قابلة للتعيين، فاستخدم inline-block أو flex.
❓ الأسئلة الشائعة
Qما الفرق بين inline وinline-block وblock؟
Aتتدفق العناصر inline أفقيًا، ولا تقبل width أو height أو الهوامش الرأسية، وتُحدَّد أبعادها بالمحتوى؛ ويؤثر padding الرأسي على العرض البصري لا على التخطيط. تشغل عناصر block سطرًا كاملاً وتقبل width وheight وكل الهوامش. وinline-block يجمع بينهما: يتدفق أفقيًا مثل inline مع قبول الأبعاد والهوامش مثل block. استخدم inline-block عند الحاجة إلى ترتيب أفقي بأبعاد متحكم بها.
Qمتى يجب أن أستخدم display:flex بدلًا من display:grid؟
Aتُستخدم flex للتخطيطات أحادية البعد بمحور رئيسي واحد، مثل أشرطة التنقل والقوائم والتوسيط والصفوف ذات العمودين؛ فيتصطف الأبناء على طول المحور مع محاذاة وتمدد تلقائيين. أما grid فللتخطيطات ثنائية الأبعاد التي تُتحكَّم في صفوفها وأعمدةها معًا، مثل الهياكل الكاملة للصفحة وشبكات البطاقات والمحاذاة المعقدة. وقاعدة بسيطة: صف أو عمود واحد يعني flex؛ ونمط شبكي يعني grid.
Qما الفرق بين display:none وvisibility:hidden؟
Aيُزيل display:none العنصر وشجرته الفرعية من العرض بالكامل، دون أن يشغل مساحة أو يُقرأ بقارئات الشاشة أو يكون تفاعليًا. أما visibility:hidden فتُخفيه بصريًا فقط؛ وتحتفظ بمساحتها ولا يزال يُقرأ بقارئات الشاشة. وتظل مستمعات أحداث JavaScript على عنصر display:none موجودة لكنها لا تُطلق أبدًا. ولتأثيرات الإظهار والإخفاء القابلة للانتقال، يكون الجمع بين visibility وopacity أنسب.
Qلماذا لا يعمل width على العناصر المضمّنة؟
Aلأن العناصر المضمّنة مثل span وa لا تولّد صناديق سطر، لذا يتجاهل المتصفح عرضها وارتفاعها وهوامشها الرأسية. وللسماح لعنصر مضمّن بقبول الأبعاد، غيّره إلى display:inline-block أو block، أو ضعه في حاوية flex أو grid حيث يصبح عنصرًا من عناصرها ويُطبَّق العرض بشكل طبيعي. وهذا أيضًا يتيح للـpadding الرأسي دفع التخطيط المحيط، وهو ما لا يفعله العنصر المضمّن العادي أبدًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
