Display Property في CSS: شرح تفصيلي

بواسطة /

Display Property في CSS: شرح تفصيلي

المقدمة

تُعد خاصية display من أهم خصائص CSS، حيث تحدد كيفية عرض العناصر على صفحة الويب. يؤثر نوع عرض العنصر على تخطيط الصفحة وتفاعل العناصر مع بعضها. في هذا الدرس، سنتناول بالتفصيل أنواع display:

  • block
  • inline
  • inline-block
  • none

سنشرح الفرق بينها ونحدد أفضل حالات الاستخدام لكل نوع من أنواع العرض، مع أمثلة عملية لتوضيح المفاهيم.

أولًا: خاصية display: block

الوصف:

  • العناصر ذات العرض block تأخذ عرضًا كاملاً (100%) من الحاوية الموجودة بها، مما يجعل كل عنصر يظهر في سطر جديد.
  • مثل: <div>، <h1>، <p>

أمثلة:

<div style="background-color: lightblue;">عنصر 1</div>
<div style="background-color: lightcoral;">عنصر 2</div>

CSS:

div {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
}

النتيجة:

  • كل عنصر يظهر في سطر مستقل، حتى لو كانت هناك مساحة فارغة بجانبه.

متى نستخدم block؟

  • عند الحاجة إلى فصل العناصر عن بعضها (مثل الفقرات والعناوين).
  • مناسب لعناصر مثل div و section لتنظيم هيكل الصفحة.

ثانيًا: خاصية display: inline

الوصف:

  • العناصر ذات العرض inline تظهر بجانب بعضها في نفس السطر.
  • مثل: <span>، <a>، <strong>.

أمثلة:

<p>
  هذا نص <span style="background-color: yellow;">مميز</span> داخل الفقرة.
</p>

CSS:

span {
  display: inline;
}

النتيجة:

  • تظهر العناصر في نفس السطر دون كسر السطر.

متى نستخدم inline؟

  • عند الحاجة إلى تنسيق جزء من النص داخل فقرة.
  • مفيد لتنسيق الروابط أو الكلمات المهمة بدون التأثير على باقي النص.

ثالثًا: خاصية display: inline-block

الوصف:

  • inline-block يجمع بين ميزات inline و block:
  • يظهر العنصر بجانب العناصر الأخرى (مثل inline).
  • يمكن تحديد العرض والارتفاع (مثل block).

أمثلة:

<span style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">
  عنصر 1
</span>
<span style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">
  عنصر 2
</span>

النتيجة:

  • يظهر العنصران بجانب بعضهما، مع إمكانية تحديد عرض وارتفاع لكل منهما.

متى نستخدم inline-block؟

  • عندما تحتاج إلى عرض العناصر بجانب بعضها، مثل الأزرار أو عناصر القائمة.
  • مثالي للعناصر التي تحتاج إلى محاذاة أفقية مع تحكم في أبعادها.

رابعًا: خاصية display: none

الوصف:

  • none يخفي العنصر تمامًا، وكأنه غير موجود في الصفحة. لا يتم حجز أي مساحة للعنصر المخفي.

أمثلة:

<p style="display: none;">هذا النص مخفي ولن يظهر في الصفحة.</p>

CSS:

.hidden {
  display: none;
}

النتيجة:

  • العنصر لا يظهر في الصفحة، ولا يتم حجز أي مساحة له.

متى نستخدم none؟

  • لإخفاء عناصر مؤقتًا (مثل النوافذ المنبثقة أو القوائم التفاعلية).
  • مناسب لإخفاء أجزاء من المحتوى بناءً على تفاعل المستخدم.

مقارنة بين أنواع display:

النوعالمميزاتالعيوبأمثلة على الاستخدام
blockيأخذ العرض الكامل ويبدأ في سطر جديدلا يمكن عرضه بجانب عناصر أخرى بنفس السطرالعناصر الهيكلية مثل <div> و <section>
inlineيظهر بجانب العناصر الأخرى في نفس السطرلا يمكن تحديد العرض أو الارتفاعالروابط والعناصر النصية مثل <a> و <span>
inline-blockيظهر بجانب العناصر الأخرى ويمكن تحديد أبعادهقد يتطلب ضبطًا إضافيًا في المحاذاةالأزرار والعناصر في القوائم الأفقية
noneيخفي العنصر تمامًا بدون حجز أي مساحةلا يظهر العنصر على الإطلاقإخفاء القوائم أو النوافذ عند عدم الحاجة لها

خامسًا: تطبيق عملي شامل على display

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>خاصية Display في CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="block">عنصر Block</div>

  <p>
    هذا نص يحتوي على 
    <span class="inline">عنصر Inline</span> 
    بجانبه.
  </p>

  <div class="inline-block-container">
    <span class="inline-block">عنصر 1</span>
    <span class="inline-block">عنصر 2</span>
  </div>

  <button onclick="toggleVisibility()">إخفاء/إظهار العنصر</button>
  <div id="toggle-content" class="block">هذا النص سيختفي عند الضغط على الزر.</div>

  <script>
    function toggleVisibility() {
      const content = document.getElementById("toggle-content");
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  </script>
</body>
</html>

CSS (styles.css):

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.block {
  display: block;
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 10px;
}

.inline {
  display: inline;
  background-color: yellow;
  padding: 5px;
}

.inline-block-container {
  margin: 20px 0;
}

.inline-block {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightgreen;
  margin-right: 10px;
  text-align: center;
  line-height: 50px;
}

#toggle-content {
  background-color: lightcoral;
  padding: 10px;
  margin-top: 10px;
}

شرح:

  • تم استخدام block لعناصر تظهر في سطر مستقل.
  • تم استخدام inline لتنسيق كلمات داخل النص.
  • تم استخدام inline-block لتنسيق العناصر بجانب بعضها مع تحكم في أبعادها.
  • تم استخدام none لإخفاء العنصر عند الضغط على الزر باستخدام JavaScript.

خاتمة

في هذا الدرس، تعرّفنا على:

  1. أنواع عرض العناصر باستخدام خاصية display.
  2. الفرق بين block، inline، inline-block، و none.
  3. حالات الاستخدام المناسبة لكل نوع.
  4. تطبيق عملي لجعل المفاهيم أكثر وضوحًا.

فهم خاصية display يُعد أمرًا أساسيًا لتنظيم تخطيط الصفحات وتصميم واجهات مستخدم فعالة. يمكنك الآن تطبيق هذه المفاهيم في مشاريعك لتحسين تنسيق العناصر بشكل احترافي.

أسئلة شائعة (FAQ)

1. هل يمكن تحويل العناصر بين block و inline ديناميكيًا؟

  • نعم، يمكنك استخدام JavaScript لتغيير خاصية display حسب الحاجة.

2. ما الفرق بين visibility: hidden و display: none؟

  • visibility: hidden تخفي العنصر مع حجز مساحته.
  • display: none تخفي العنصر وتزيله من التدفق تمامًا.

3. متى يُفضل استخدام inline-block بدلًا من block؟

  • عندما تريد محاذاة العناصر أفقيًا مع تحكم في أبعادها، مثل الأزرار في القوائم الأفقية.

هل أنت مستعد للانتقال إلى الدرس التالي؟ 😊

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top
Verified by MonsterInsights