تعلم خاصية Display في CSS - دليل المبتدئين الشامل

📦 خاصية Display في CSS: سر التحكم في شكل موقعك!

مرحباً بك في عالم التخطيط والتصميم! 🎨 تخيل أنك تبني منزلاً من المكعبات. بعض المكعبات تأخذ الصف كاملاً، وبعضها يجلس بجانب الآخر. في CSS، تتحكم خاصية display في كيفية تصرف "مكعبات" صفحة الويب (عناصر HTML) وترتيب نفسها. هي واحدة من أهم وأقوى الخصائص التي ستتعلمها، فهي تحدد الهيكل الأساسي لصفحتك.

🔍 ما هي خاصية Display؟

ببساطة شديدة، خاصية display تحدد الطريقة التي يظهر بها العنصر على الصفحة وكيف يتفاعل مع العناصر المحيطة به. كل عنصر في HTML له قيمة display افتراضية. مهمتك كمصمم هي تغيير هذه القيمة لتتحكم في التخطيط.

دعنا نبدأ بأكثر قيمتين أساسيتين وانتشاراً.

🧱 العناصر من نوع Block (كتلة)

العناصر من النوع block تتصرف مثل "المكعبات المتسلطة"! 🚧

خصائصها:

• تأخذ العرض الكامل للعنصر الحاوي لها (عادةً عرض الصفحة) من اليسار إلى اليمين.
• تبدأ دائماً على سطر جديد، حتى لو كان هناك مساحة بجانبها.
• يمكنك تحديد width (العرض) و height (الارتفاع) لها.
• تسمح بإضافة margin (الهامش) و padding (الحشوة) من جميع الجهات.

أمثلة على عناصر block افتراضياً في HTML: <div>, <p>, <h1> إلى <h6>, <section>, <ul>, <li>.

مثال عملي:

<!-- ملف HTML -->
<p>هذه فقرة (block).</p>
<div>هذا قسم div (block).</div>

/* ملف CSS */
p {
  background-color: lightblue;
  padding: 10px;
}
div {
  background-color: lightcoral;
  width: 200px; /* يمكننا تحديد العرض */
  height: 100px; /* والارتفاع */
  margin-top: 20px; /* ويمكننا إضافة هامش من الأعلى */
}

في المثال أعلاه، كل من <p> و <div> سيظهران كل على سطر منفصل، وسيأخذ <p> العرض الكامل، بينما <div> سيكون عرضه 200 بكسل فقط كما حددنا.

📝 العناصر من نوع Inline (ضمن السطر)

العناصر من النوع inline تتصرف مثل "الكلمات داخل جملة"! ✍️

خصائصها:

• تأخذ فقط المساحة التي تحتاجها (محتواها)، ولا تبدأ سطراً جديداً.
• تظهر بجوار بعضها على نفس السطر إذا توفر المكان.
• لا يمكنك تحديد width و height لها (سيتم تجاهل هذه القيم).
• الهامش margin والحشوة padding العلوي والسفلي لا يؤثران على العناصر المجاورة لها في نفس السطر (لكن اليسار واليمين يؤثران).

أمثلة على عناصر inline افتراضياً في HTML: <span>, <a>, <strong>, <em>, <img>.

مثال عملي:

<!-- ملف HTML -->
<p>هذه فقرة تحتوي على <span>عنصر span</span> و <a href="#">رابط</a> داخلها، وكلاهما inline.</p>

/* ملف CSS */
span {
  background-color: yellow;
  padding: 5px 10px; /* الحشوة تعمل من اليسار واليمين */
  margin-right: 15px; /* الهامش يعمل من اليمين */
}
a {
  background-color: lightgreen;
  /* width: 100px; لو كتبنا هذا السطر، لن يعمل! */
}

لاحظ كيف أن <span> و <a> يجلسان بجانب النص وبجانب بعضهما على نفس السطر. لا يمكننا جعل <span> بارتفاع 100 بكسل مثلاً.

🧩 العناصر من نوع Inline-Block (الأفضل من العالمين!)

ماذا لو أردنا عناصر تجلس بجانب بعضها مثل inline، ولكن نتمكن من تحديد أبعادها مثل block؟ هنا يأتي دور البطل الثالث: inline-block! 🏆

خصائصها:

• تظهر بجوار بعضها على نفس السطر (مثل inline).
• يمكنك تحديد width و height لها (مثل block).
• تسمح بإضافة margin و padding من جميع الجهات وتؤثر على العناصر المجاورة.

مثال عملي:

<!-- ملف HTML -->
<div class="box">مربع 1</div>
<div class="box">مربع 2</div>
<div class="box">مربع 3</div>

/* ملف CSS */
.box {
  display: inline-block; /* السر هنا! */
  width: 100px;
  height: 100px;
  background-color: plum;
  margin: 10px;
  text-align: center;
  line-height: 100px; /* لتمرير النص عمودياً */
}

الآن، المربعات الثلاثة ستظهر بجانب بعضها على نفس السطر (إذا كان عرض الشاشة كافياً)، وكل منها له أبعاد 100x100 بكسل محددة. هذا مفيد جداً لعمل أزرار أو معارض صور بسيطة.

🚫 القيمة None (الإخفاء التام)

أحياناً نريد إخفاء عنصر ما تماماً وكأنه غير موجود. هنا نستخدم display: none;.

• يختفي العنصر من الصفحة.
• لا يحجز أي مساحة له.
• لا يمكن للزائر التفاعل معه.

.hidden-element {
  display: none; /* وداعاً أيها العنصر! */
}

🛠️ كيف تغير خاصية Display؟

ببساطة، استهدف العنصر في CSS واكتب الخاصية display مع القيمة التي تريدها.

/* جعل الرابط يتصرف ككتلة (مفيد لقوائم التنقل) */
a.menu-item {
  display: block;
  padding: 15px;
}

/* جعل الفقرات تظهر بجانب بعضها */
p.special-paragraph {
  display: inline;
}

/* إخفاء عنصر */
.secret {
  display: none;
}